import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export function ComingSoon({
  phase,
  title,
  bullets,
  intro,
}: {
  phase: string;
  title: string;
  bullets: string[];
  intro?: string;
}) {
  return (
    <main className="flex-1 overflow-y-auto p-8 bg-muted/20">
      <Card>
        <CardContent className="p-8 max-w-2xl mx-auto">
          <Badge variant="warning">{phase}</Badge>
          <h2 className="mt-4 text-2xl font-semibold">{title}</h2>
          {intro && <p className="mt-2 text-muted-foreground">{intro}</p>}
          <ul className="mt-6 space-y-2 text-sm">
            {bullets.map((b) => (
              <li key={b} className="flex items-start gap-2">
                <span className="text-[var(--sag-brand)] mt-1">→</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
          <p className="mt-6 text-xs text-muted-foreground">
            This module is defined in the PRD but not yet built. See the PRD for the full Phase {phase.split(" ")[1]} scope.
          </p>
        </CardContent>
      </Card>
    </main>
  );
}