Market Card

import { MarketCard } from "@/components/hip4/market-card"
import { useMarkets } from "@/hooks/hip4/use-markets"

function MarketList() {
  // Variant auto-detected from market.description
  // Prices auto-resolved from mids map
  const { markets, mids } = useMarkets()

  return (
    <div className="grid grid-cols-3 gap-4">
      {markets.map((m) => (
        <MarketCard
          key={m.yesCoin}
          market={m}
          mids={mids}
          onSideClick={(side) =>
            router.push(`/market/${m.yesCoin}?side=${side}`)
          }
        />
      ))}
    </div>
  )
}