import { X } from 'lucide-react'

const METHODS = [
  { key: 'cash',     label: 'ΜΕΤΡΗΤΑ',           icon: '💵', color: '#15803d', bg: '#f0fdf4', border: '#86efac' },
  { key: 'card',     label: 'ΚΑΡΤΑ',              icon: '💳', color: '#1d4ed8', bg: '#eff6ff', border: '#93c5fd' },
  { key: 'transfer', label: 'ΤΡΑΠΕΖΙΚΗ ΜΕΤΑΦΟΡΑ', icon: '🏦', color: '#6d28d9', bg: '#f5f3ff', border: '#c4b5fd' },
  { key: 'treat',    label: 'ΚΕΡΑΣΤΗΚΕ',          icon: '🎁', color: '#b45309', bg: '#fffbeb', border: '#fcd34d' },
]

export default function PaymentMethodModal({ onSelect, onCancel, title = 'Τρόπος Πληρωμής;' }) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
      onClick={onCancel}
    >
      <div
        className="w-full max-w-sm rounded-2xl bg-white shadow-2xl"
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
          <span className="text-base font-bold text-gray-800">{title}</span>
          <button onClick={onCancel} className="text-gray-400 hover:text-gray-600 p-1">
            <X size={16} />
          </button>
        </div>

        {/* Method buttons */}
        <div className="p-4 grid grid-cols-2 gap-3">
          {METHODS.map(m => (
            <button
              key={m.key}
              onClick={() => onSelect(m.key)}
              style={{ background: m.bg, borderColor: m.border, color: m.color }}
              className="flex flex-col items-center justify-center gap-2 rounded-xl border-2 py-5 font-bold text-sm transition-transform active:scale-95 hover:opacity-90"
            >
              <span className="text-2xl">{m.icon}</span>
              {m.label}
            </button>
          ))}
        </div>

        <div className="px-4 pb-4">
          <button
            onClick={onCancel}
            className="w-full rounded-lg border border-gray-200 py-2 text-sm text-gray-500 hover:bg-gray-50"
          >
            Ακύρωση
          </button>
        </div>
      </div>
    </div>
  )
}
