import React from "react";
import { CalendarDays, Users } from "lucide-react";
import { Button } from "./button";
import { Badge } from "./badge";
import { cn } from "@/lib/utils";
import { formatCurrency } from "@/lib/format-currency";
import { formatDateShort } from "@/lib/format-date";

/**
 * A resumable loan application summary — shown when an existing user has one or
 * more draft applications and must pick which one to continue. Used on the
 * frontend "Getting Started" screen ahead of the individual/joint choice.
 */
export interface LoanDraftCardProps {
  applicantName: string;
  /** Names of any co-applicants — presence implies a joint application. */
  coApplicantNames?: string[];
  desiredLoanAmount?: number;
  createdAt: string;
  onContinue: () => void;
  className?: string;
}

export function LoanDraftCard({
  applicantName,
  coApplicantNames = [],
  desiredLoanAmount,
  createdAt,
  onContinue,
  className,
}: LoanDraftCardProps) {
  const isJoint = coApplicantNames.length > 0;

  return (
    <div
      className={cn(
        "flex w-full items-center justify-between gap-4 border border-border p-5",
        className,
      )}
    >
      <div className="flex min-w-0 flex-col gap-2">
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-label-large text-foreground">
            {applicantName}
          </span>
          {isJoint && (
            <Badge variant="secondary" className="gap-1">
              <Users className="h-3 w-3" />
              Joint with {coApplicantNames.join(", ")}
            </Badge>
          )}
        </div>
        <div className="flex flex-wrap items-center gap-3 text-body-small text-muted-foreground">
          <span className="flex items-center gap-1">
            <CalendarDays className="h-3.5 w-3.5" />
            {formatDateShort(createdAt)}
          </span>
          {desiredLoanAmount != null && (
            <span>{formatCurrency(desiredLoanAmount)}</span>
          )}
        </div>
      </div>
      <Button
        type="button"
        variant="outline-primary"
        onClick={onContinue}
        className="shrink-0"
      >
        Continue
      </Button>
    </div>
  );
}