"use client";

import { useId } from "react";
import { LogOut } from "lucide-react";
import { Button } from "@/components/common/Button";
import { Modal } from "@/components/app/Modal";
import { useTranslation } from "@/hooks/useTranslation";

interface Props {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

export function LogoutConfirmModal({ open, onClose, onConfirm }: Props) {
  const { t } = useTranslation();
  const bodyId = useId();

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={t("common.logoutModal.title")}
      size="sm"
      describedById={bodyId}
      hideHeader
    >
      <div className="flex flex-col items-center gap-5 pt-2 text-center">
        <span className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-rose-50 text-rose-600 ring-8 ring-rose-50/60 dark:bg-rose-500/10 dark:text-rose-400 dark:ring-rose-500/5">
          <LogOut className="h-6 w-6" aria-hidden />
        </span>

        <div className="flex flex-col gap-2">
          <h2 className="text-lg font-bold text-slate-900 dark:text-white">
            {t("common.logoutModal.title")}
          </h2>
          <p id={bodyId} className="leading-relaxed text-slate-500 dark:text-slate-400">
            {t("common.logoutModal.body")}
          </p>
        </div>

        <div className="flex w-full flex-col-reverse gap-3 sm:flex-row">
          <Button type="button" variant="outline" onClick={onClose} className="w-full sm:flex-1">
            {t("common.logoutModal.cancel")}
          </Button>
          <Button type="button" variant="destructive" onClick={onConfirm} className="w-full sm:flex-1">
            {t("common.logoutModal.confirm")}
          </Button>
        </div>
      </div>
    </Modal>
  );
}