export default function MarketOverview({ data }) {
  if (!data) return null

  const markets = [
    { name: 'S&P 500', ...data.sp500 },
    { name: 'NASDAQ', ...data.nasdaq },
    { name: 'DOW', ...data.dow },
    { name: 'VIX', ...data.vix },
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      {markets.map((market) => {
        const isPositive = market.change >= 0
        return (
          <div key={market.name} className="stock-card">
            <p className="text-sm font-medium text-gray-500 mb-1">{market.name}</p>
            <p className="text-xl font-bold text-gray-900">
              {market.value.toLocaleString()}
            </p>
            <p className={`text-sm font-medium ${
              isPositive ? 'stock-positive' : 'stock-negative'
            }`}>
              {isPositive ? '↑' : '↓'} {Math.abs(market.change)} ({market.changePercent > 0 ? '+' : ''}{market.changePercent}%)
            </p>
          </div>
        )
      })}
    </div>
  )
}