import { Construction } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { Card, CardContent } from "@/components/ui/card";

export function ComingSoon({
  title,
  breadcrumb,
  phase,
}: {
  title: string;
  breadcrumb?: string;
  phase?: string;
}) {
  return (
    <div>
      <PageHeader title={title} breadcrumb={breadcrumb} />
      <Card>
        <CardContent className="flex flex-col items-center justify-center gap-3 py-20 text-center">
          <Construction className="size-10 text-brand-orange" />
          <p className="text-lg font-medium">This module is coming soon</p>
          <p className="max-w-md text-sm text-muted-foreground">
            {phase
              ? `Scheduled for ${phase}. The foundation (auth, roles, branches, users) is live now.`
              : "Under construction."}
          </p>
        </CardContent>
      </Card>
    </div>
  );
}