'use client'
import { Bundle, formatMB } from '@/lib/data'

interface Props {
  bundle: Bundle
  symbol: string
  onClick: () => void
  loading?: boolean
}

const NET_COLORS: Record<string, string> = {
  MTN:      'bg-[#1e1a00] text-[#c9a84c] border border-[#2e2a1e]',
  Airtel:   'bg-[#1e0000] text-[#c97070] border border-[#2e1e1e]',
  Glo:      'bg-[#001e08] text-[#70c9a0] border border-[#1e2e20]',
  '9mobile':'bg-[#001a12] text-[#70c9b0] border border-[#1e2e28]',
  AT:       'bg-[#00101e] text-[#70a0c9] border border-[#1e202e]',
  Telecel:  'bg-[#1e0000] text-[#c97070] border border-[#2e1e1e]',
}

export default function DataCard({ bundle, symbol, onClick, loading }: Props) {
  const netColor = NET_COLORS[bundle.network] ?? 'bg-[#1a1a1a] text-[#888]'

  return (
    <button
      onClick={onClick}
      disabled={loading}
      className="w-full p-4 rounded-2xl flex justify-between items-center mb-2 transition-all active:scale-[0.98] disabled:opacity-50 text-left"
      style={{ background: '#111', border: '0.5px solid #1e1e1e' }}
      onMouseEnter={e => (e.currentTarget.style.borderColor = '#2e2a1e')}
      onMouseLeave={e => (e.currentTarget.style.borderColor = '#1e1e1e')}
    >
      <div className="flex items-center gap-3">
        <div className={`net-badge ${netColor}`}>
          {bundle.network.substring(0, 2)}
        </div>
        <div>
          <div className="font-bold text-sm" style={{ color: '#e8e8e8' }}>{bundle.name}</div>
          <div className="text-[9px] mt-0.5" style={{ color: '#444' }}>
            {formatMB(bundle.dataMB)} · {bundle.validityDays}d · Instant
            {bundle.type ? ` · ${bundle.type}` : ''}
          </div>
        </div>
      </div>
      <div className="shrink-0 ml-3">
        {loading
          ? <span className="text-[10px] font-bold animate-pulse" style={{ color: '#c9a84c' }}>wait…</span>
          : <span className="font-black text-sm" style={{ color: '#c9a84c' }}>{symbol}{bundle.price.toLocaleString()}</span>
        }
      </div>
    </button>
  )
}