"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
import { Copy } from "lucide-react";
import { useTranslations } from "next-intl";

interface PreviousWorkDuplicateDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => Promise<void>;
  isLoading: boolean;
}

export function PreviousWorkDuplicateDialog({
  open,
  onOpenChange,
  onConfirm,
  isLoading,
}: PreviousWorkDuplicateDialogProps) {
  const t = useTranslations("dashboard.previousWork.dialogs.duplicate");

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[620px] gap-0 rounded-2xl border border-border bg-card p-8" showCloseButton={false}>
        <div className="flex flex-col items-center gap-6 text-center">
          <div className="flex h-[88px] w-[88px] items-center justify-center rounded-full bg-highlights-bg text-primary">
            <Copy className="h-10 w-10" />
          </div>

          <div className="space-y-3">
            <DialogTitle className="text-[32px] font-bold leading-tight text-foreground">
              {t("title")}
            </DialogTitle>
            <DialogDescription className="text-base leading-7 text-muted-foreground">
              {t("description")}
            </DialogDescription>
          </div>

          <div className="flex w-full max-w-[340px] items-center justify-center gap-3">
            <Button type="button" variant="outline" className="h-12 flex-1 rounded-xl border-border text-foreground" disabled={isLoading} onClick={() => onOpenChange(false)}>
              {t("cancel")}
            </Button>
            <Button type="button" className="h-12 flex-1 rounded-xl bg-primary text-white hover:bg-primary-700" disabled={isLoading} onClick={onConfirm}>
              {t("confirm")}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}