export function VolumeHistorySection({ row }) {
  if (!row.volumeHistory || row.volumeHistory.length === 0) return null;

  return (
    <div className="space-y-3 md:col-span-2 lg:col-span-3 mt-6 pt-6 border-t border-slate-700/50">
      <h4 className="text-sm font-semibold text-slate-300 mb-3">📊 LAST 5 DAYS VOLUME</h4>
      <div className="bg-slate-800/50 rounded-lg overflow-hidden">
        <table className="w-full text-xs">
          <thead>
            <tr className="border-b border-slate-700/50 bg-slate-800/70">
              <th className="text-left py-3 px-4 text-slate-400 font-semibold">Date</th>
              <th className="text-right py-3 px-4 text-slate-400 font-semibold">Volume</th>
              <th className="text-right py-3 px-4 text-slate-400 font-semibold">Open</th>
              <th className="text-right py-3 px-4 text-slate-400 font-semibold">High</th>
              <th className="text-right py-3 px-4 text-slate-400 font-semibold">Low</th>
              <th className="text-right py-3 px-4 text-slate-400 font-semibold">Close</th>
              <th className="text-right py-3 px-4 text-slate-400 font-semibold">VWAP</th>
            </tr>
          </thead>
          <tbody>
            {row.volumeHistory.map((day, idx) => {
              const date = new Date(day.date);
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              const yesterday = new Date(today);
              yesterday.setDate(yesterday.getDate() - 1);
              const dayDate = new Date(date);
              dayDate.setHours(0, 0, 0, 0);
              
              let dayLabel;
              if (dayDate.getTime() === today.getTime()) {
                dayLabel = 'Today';
              } else if (dayDate.getTime() === yesterday.getTime()) {
                dayLabel = 'Yesterday';
              } else {
                dayLabel = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
              }
              
              // Format volume with K/M/B
              const formatVolume = (vol) => {
                if (!vol || vol === 0) return '—';
                const absVal = Math.abs(vol);
                if (absVal >= 1e9) return `${(absVal / 1e9).toFixed(2)}B`;
                if (absVal >= 1e6) return `${(absVal / 1e6).toFixed(2)}M`;
                if (absVal >= 1e3) return `${(absVal / 1e3).toFixed(2)}K`;
                return absVal.toLocaleString();
              };
              
              // Format price
              const formatPrice = (price) => {
                if (!price || price === 0) return '—';
                return `$${parseFloat(price).toFixed(2)}`;
              };
              
              return (
                <tr key={idx} className="border-b border-slate-700/30 hover:bg-slate-800/70 transition-colors">
                  <td className="py-3 px-4 text-slate-300 font-medium">{dayLabel}</td>
                  <td className="py-3 px-4 text-right text-slate-200 font-mono">{formatVolume(day.volume)}</td>
                  <td className="py-3 px-4 text-right text-slate-300 font-mono">{formatPrice(day.open)}</td>
                  <td className="py-3 px-4 text-right text-green-400 font-mono">{formatPrice(day.high)}</td>
                  <td className="py-3 px-4 text-right text-red-400 font-mono">{formatPrice(day.low)}</td>
                  <td className="py-3 px-4 text-right text-slate-200 font-mono font-semibold">{formatPrice(day.close)}</td>
                  <td className="py-3 px-4 text-right text-blue-400 font-mono font-semibold">{formatPrice(day.vwap)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

