import { useBetslip } from '#/components/providers/BetslipProvider'
import { PriceTag } from '#/components/ascii/PriceTag'

interface MarketSelectionProps {
  matchId: string
  matchName: string
  marketId: string
  selectionName: string
  price: number
  factionGlyph: string
}

export function MarketSelection({
  matchId,
  matchName,
  marketId,
  selectionName,
  price,
  factionGlyph,
}: MarketSelectionProps) {
  const { selections, addSelection, removeSelection } = useBetslip()

  const isSelected = selections.some((s) => s.marketId === marketId)

  const handleToggle = () => {
    if (isSelected) {
      removeSelection(marketId)
    } else {
      addSelection({
        matchId,
        matchName,
        marketId,
        selectionName,
        price,
        factionGlyph,
      })
    }
  }

  return (
    <button
      onClick={handleToggle}
      className={`w-full flex justify-between items-center p-2.5 border transition-all cursor-pointer font-mono text-xs select-none ${
        isSelected
          ? 'border-emerald-500/50 bg-emerald-950/20 text-emerald-400 font-bold'
          : 'border-slate-900 hover:border-slate-800 bg-black/60 text-slate-400 hover:text-slate-300'
      }`}
    >
      <span className="flex items-center gap-1">
        <span className={isSelected ? 'text-emerald-500' : 'text-slate-600'}>
          {factionGlyph || '◇'}
        </span>
        {selectionName}
      </span>
      <PriceTag price={price} />
    </button>
  )
}
