"use client";

import { LogOut } from "lucide-react";
import Modal from "@/components/Modal";

interface LeaveConfirmModalProps {
  open: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function LeaveConfirmModal({
  open,
  onConfirm,
  onCancel,
}: LeaveConfirmModalProps) {
  return (
    <Modal open={open} onClose={onCancel} variant="dialog">
      <div className="flex flex-col items-center">
        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
          <LogOut size={22} className="text-rose-400" />
        </div>

        <h2 className="mt-4 text-base font-bold text-heading">
          确定要退出房间吗？
        </h2>
        <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
          退出后你的滑卡进度不会丢失，可以用房间号重新加入
        </p>

        <div className="mt-5 flex w-full gap-2.5">
          <button
            onClick={onCancel}
            className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
          >
            继续滑卡
          </button>
          <button
            onClick={onConfirm}
            className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
          >
            退出房间
          </button>
        </div>
      </div>
    </Modal>
  );
}