'use client';

import React from 'react';

type NoticeDeleteModalProps = {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isDeleting?: boolean;
};

/**
 * 공지사항 삭제 확인 모달
 */
export default function NoticeDeleteModal({
  open,
  onClose,
  onConfirm,
  isDeleting = false,
}: NoticeDeleteModalProps) {
  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center">
      <div
        className="absolute inset-0 bg-black/40"
        onClick={onClose}
        aria-hidden="true"
      />
      <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end w-[400px]">
        <div className="flex flex-col gap-[16px] items-start justify-center w-full">
          <div className="flex gap-[8px] items-start w-full">
            <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
              공지사항을 삭제하시겠습니까?
            </p>
          </div>
          <div className="flex gap-[8px] items-start w-full">
            <div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
              <p className="mb-0">삭제 버튼을 누르면 공지사항이 삭제됩니다.</p>
              <p>정말 삭제하시겠습니까?</p>
            </div>
          </div>
        </div>
        <div className="flex gap-[8px] items-center justify-end shrink-0">
          <button
            type="button"
            onClick={onClose}
            disabled={isDeleting}
            className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
              취소
            </p>
          </button>
          <button
            type="button"
            onClick={onConfirm}
            disabled={isDeleting}
            className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
              {isDeleting ? '삭제 중...' : '삭제'}
            </p>
          </button>
        </div>
      </div>
    </div>
  );
}

