components/StockCard.js

export default function StockCard({ stock, onClick, isSelected }) {
  const isPositive = parseFloat(stock.change) >= 0
  
  return (
    <div
      onClick={onClick}
      className={`stock-card cursor-pointer transition-all duration-200 ${
        isSelected ? 'ring-2 ring-primary-500 bg-primary-50' : ''
      }`}
    >
      <div className="flex justify-between items-start mb-3">
        <div>
          <h3 className="font-semibold text-gray-900">{stock.symbol}</h3>
          <p className="text-sm text-gray-500">{stock.name}</p>
        </div>
        <div className={`text-xs px-2 py-1 rounded-full ${
          isPositive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
        }`}>
          {stock.changePercent > 0 ? '+' : ''}{stock.changePercent}%
        </div>
      </div>
      
      <div className="flex justify-between items-end">
        <div>
          <p className="text-2xl font-bold text-gray-900">
            ${stock.price}
          </p>
          <p className={`text-sm font-medium ${
            isPositive ? 'stock-positive' : 'stock-negative'
          }`}>
            {isPositive ? '↑' : '↓'} {Math.abs(stock.change)}
          </p>
        </div>
        <div className="text-right">
          <p className="text-xs text-gray-500">Vol</p>
          <p className="text-sm font-medium text-gray-700">
            {(stock.volume / 1000000).toFixed(1)}M
          </p>
        </div>
      </div>
    </div>
  )
}