// ---------------------------------------------------------------------------
// Shared modal wrapper — handles overlay, centering, dialog role, aria
// ---------------------------------------------------------------------------

import type { ReactNode } from 'react'

interface ModalProps {
  ariaLabelledBy: string
  children: ReactNode
}

export default function Modal({ ariaLabelledBy, children }: ModalProps) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
      role="dialog"
      aria-modal="true"
      aria-labelledby={ariaLabelledBy}
    >
      <div className="bg-black-900 border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4 space-y-4">
        {children}
      </div>
    </div>
  )
}

// ---------------------------------------------------------------------------
// Shared modal footer with two buttons
// ---------------------------------------------------------------------------

interface ModalActionsProps {
  cancelLabel: string
  confirmLabel: string
  onCancel: () => void
  onConfirm: () => void
  /** Tailwind classes for the confirm button (default: white bg) */
  confirmClassName?: string
}

export function ModalActions({
  cancelLabel,
  confirmLabel,
  onCancel,
  onConfirm,
  confirmClassName = 'bg-white text-[#000000] hover:bg-gray-200',
}: ModalActionsProps) {
  return (
    <div className="flex gap-3">
      <button
        onClick={onCancel}
        className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
                   py-2.5 px-4 rounded-xl border border-white/10 transition-colors duration-150
                   hover:bg-black-600"
      >
        {cancelLabel}
      </button>
      <button
        onClick={onConfirm}
        className={`flex-1 font-medium text-sm py-2.5 px-4 rounded-xl transition-colors duration-150 ${confirmClassName}`}
      >
        {confirmLabel}
      </button>
    </div>
  )
}