import { Construction } from "lucide-react";

import { Button, Card, CardContent, CardHeader, CardTitle } from "@ump/shared";

/**
 * Props the applicant workspace tabs are called with by `ApplicantRegistrationDashboard`.
 *
 * The walking-skeleton stubs accept the full prop surface (kept permissive via the
 * index signature) and only wire `onNext`, which is what drives the report-gate flow.
 * Slices 3/4 replace each stub file with the real ported form at the same path.
 */
export type WorkspacePlaceholderProps = { onNext?: () => void } & Record<string, unknown>;

/** Shared "đang được di chuyển" card rendered inside each not-yet-migrated workspace tab. */
export function WorkspaceTabPlaceholder({
  title,
  slice,
  onNext,
}: {
  title: string;
  slice: string;
  onNext?: () => void;
}) {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
            <Construction className="h-5 w-5 text-muted-foreground" />
          </div>
          <CardTitle className="font-serif text-lg">{title}</CardTitle>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-sm text-muted-foreground">
          Biểu mẫu này đang được di chuyển sang ứng dụng mới ({slice}). Cấu trúc workspace, khóa
          tab theo bước và vòng đời bản nháp đã hoạt động.
        </p>
        {onNext ? (
          <Button type="button" variant="outline" onClick={onNext}>
            Tiếp theo →
          </Button>
        ) : null}
      </CardContent>
    </Card>
  );
}
