'use client'
import { useState } from 'react'
import DataCard from './DataCard'
import PhoneModal from './PhoneModal'
import { GH_BUNDLES, Bundle } from '@/lib/data'

const grouped = GH_BUNDLES.reduce<Record<string, Bundle[]>>((acc, b) => {
  acc[b.network] = acc[b.network] ?? []
  acc[b.network].push(b)
  return acc
}, {})

export default function GhanaStore() {
  const [selected, setSelected] = useState<Bundle | null>(null)

  return (
    // position:relative is required so the absolute-positioned modal overlay
    // is contained within this element and not the entire page
    <div className="relative">
      <div className="p-4 max-w-lg mx-auto pb-28">
        {/* Banner */}
        <div className="rounded-3xl p-5 text-center mb-5" style={{ background: '#111', border: '0.5px dashed #2e2a1e' }}>
          <span className="text-2xl mb-2 block">🇬🇭</span>
          <h2 className="font-black text-sm" style={{ color: '#c9a84c' }}>Ghana Bundles</h2>
          <p className="text-[10px] mt-1" style={{ color: '#555' }}>MoMo or Card · No wallet needed</p>
        </div>

        {Object.entries(grouped).map(([network, bundles]) => (
          <div key={network} className="mb-4">
            <p className="section-label">{network}</p>
            {bundles.map((bundle) => (
              <DataCard key={bundle.id} bundle={bundle} symbol="GH₵" onClick={() => setSelected(bundle)} />
            ))}
          </div>
        ))}
      </div>

      {selected && (
        <PhoneModal bundle={selected} country="GH" symbol="GH₵" onClose={() => setSelected(null)} />
      )}
    </div>
  )
}