// frontend/components/Placeholder.tsx
import { GlassCard } from "./GlassCard";
import { Icon } from "./Icon";
import type { IconName } from "./icons/paths";

export function Placeholder({ title, icon }: { title: string; icon: IconName }) {
  return (
    <GlassCard
      className="placeholder"
      role="status"
      style={{ alignItems: "center", textAlign: "center", padding: "56px 24px", marginTop: 24 }}
    >
      <div className="brand-mark" style={{ width: 56, height: 56, borderRadius: 16 }}>
        <Icon name={icon} />
      </div>
      <h2 style={{ fontFamily: "var(--font-disp)", fontSize: 24, margin: "16px 0 6px" }}>{title}</h2>
      <p style={{ color: "var(--muted)", fontSize: 14, maxWidth: "34ch" }}>
        준비 중이에요. 이 화면은 곧 아리가 채워둘게요.
      </p>
    </GlassCard>
  );
}