interface Props {
  title: string
  lines: string[]
  confirmLabel: string
  onConfirm: () => void
  onCancel: () => void
  /** 확인 액션이 진행 중일 때 true. 두 버튼을 모두 비활성화해 중복 클릭을 막는다. */
  busy?: boolean
}

export default function ConfirmDialog({
  title,
  lines,
  confirmLabel,
  onConfirm,
  onCancel,
  busy = false,
}: Props) {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/30">
      <div className="w-96 rounded-lg bg-white p-5">
        <h2 className="text-base font-semibold">{title}</h2>

        <ul className="mt-3 space-y-1 rounded-md bg-gray-50 p-3 text-sm">
          {lines.map((line) => (
            <li key={line} className="font-mono text-xs">{line}</li>
          ))}
        </ul>

        <div className="mt-5 flex justify-end gap-2">
          <button
            type="button"
            disabled={busy}
            onClick={onCancel}
            className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
          >
            취소
          </button>
          <button
            type="button"
            disabled={busy}
            onClick={onConfirm}
            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white disabled:bg-gray-300"
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  )
}