"use client";

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

interface RoleDisableDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  roleName: string;
  onConfirmDisable: () => void;
}

export function RoleDisableDialog({
  open,
  onOpenChange,
  roleName,
  onConfirmDisable,
}: RoleDisableDialogProps) {
  const t = useTranslations("dashboard.users.roles.dialogs.disable");

  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-[var(--yellow-500)]/10 text-[var(--yellow-500)]">
            <TriangleAlert className="h-10 w-10" />
          </div>

          <div className="space-y-3">
            <DialogTitle className="text-[32px] font-bold leading-tight text-foreground">
              {t("title", { role: roleName })}
            </DialogTitle>
            <DialogDescription className="text-base leading-7 text-muted-foreground">
              {t("description", { role: roleName })}
            </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"
              onClick={() => onOpenChange(false)}
            >
              {t("cancel")}
            </Button>
            <Button
              type="button"
              className="h-12 flex-1 rounded-xl bg-primary text-white hover:bg-primary-700"
              onClick={onConfirmDisable}
            >
              {t("confirm")}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}