/** Temporary body for a section page; phase 2 replaces it with real examples. */
export function Placeholder({ components }: { components: string[] }) {
  return (
    <div className="mt-8 rounded-lg border border-dashed border-border bg-card p-6">
      <p className="text-sm font-medium text-foreground">Section not built yet</p>
      <p className="mt-1 text-sm text-muted-foreground">Components that will be placed here:</p>
      <ul className="mt-3 flex flex-wrap gap-2">
        {components.map((c) => (
          <li key={c} className="rounded-md border border-border bg-muted px-2 py-0.5 text-xs text-foreground">
            {c}
          </li>
        ))}
      </ul>
    </div>
  );
}