import { AppIcon, type IconName } from "../components/PixelIcons";

export default function Placeholder({ title, icon, note }: { title: string; icon: IconName; note: string }) {
  return (
    <>
      <div className="page-head">
        <div className="eyebrow">即將開放</div>
        <h1 className="page-title-row">
          <AppIcon name={icon} size={38} framed glow variant="hero" />
          {title}
        </h1>
        <p>{note}</p>
      </div>
      <div className="card pad-lg">
        <div className="card-title pixel">
          <AppIcon name="hammer" size={24} framed variant="hero" />
          建造中的區域
        </div>
        <p className="muted">
          這個區域在下一個切片開放。目前先完成「今日 · 基地」與「市場 · 世界」兩個入口，並接上真實資料與歷史風向標。
        </p>
      </div>
    </>
  );
}