"use client";

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

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

export function PreviousWorkDeleteDialog({
  open,
  onOpenChange,
  onConfirm,
  isLoading,
}: PreviousWorkDeleteDialogProps) {
  const t = useTranslations("dashboard.previousWork.dialogs.delete");

  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-destructive/10 text-destructive">
            <Trash2 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-destructive text-white hover:bg-destructive/90"
              disabled={isLoading}
              onClick={onConfirm}
            >
              {t("confirm")}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}