import React from "react";
import { cn } from "@/lib/utils";
import { Badge } from "./badge";
import { Button } from "./button";
import { Card } from "./card";
import { Pencil } from "lucide-react";

export type ApplicantStatus = "active" | "waiting";

export interface LoanApplicantInformationProps {
  name: string;
  phone: string;
  email: string;
  /** "waiting" shows a badge next to the name */
  status?: ApplicantStatus;
  /** When provided, shows an edit button in the top-right corner */
  onEdit?: () => void;
  className?: string;
}

export function LoanApplicantInformation({
  name,
  phone,
  email,
  status = "active",
  onEdit,
  className,
}: LoanApplicantInformationProps) {
  return (
    <Card className={cn("relative flex flex-col gap-3 p-4", className)}>
      {onEdit && (
        <Button
          variant="ghost"
          size="icon"
          onClick={onEdit}
          className="absolute top-2 right-2 h-7 w-7 text-muted-foreground"
          aria-label="Edit applicant"
        >
          <Pencil className="h-3.5 w-3.5" />
        </Button>
      )}

      <div className="flex items-center gap-2">
        <span className="text-sm font-semibold text-foreground">{name}</span>
        {status === "waiting" && (
          <Badge variant="warning" className="text-xs">
            Waiting
          </Badge>
        )}
      </div>

      <div className="flex flex-col gap-1.5">
        <p className="text-sm text-foreground">
          <span className="font-medium">{phone}</span>{" "}
          <span className="text-muted-foreground">contact number</span>
        </p>
        <p className="text-sm text-foreground">
          <span className="font-medium">{email}</span>{" "}
          <span className="text-muted-foreground">contact email</span>
        </p>
      </div>
    </Card>
  );
}