import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/react/24/solid';
import type { MarketData } from '../types';

interface MarketOverviewProps {
  data: MarketData | null;
  loading?: boolean;
}

export function MarketOverview({ data, loading }: MarketOverviewProps) {
  if (loading || !data) {
    return (
      <div className="p-4 bg-surface-secondary border-b border-border">
        <div className="animate-pulse">
          <div className="h-6 w-32 bg-surface-tertiary rounded mb-2"></div>
          <div className="h-8 w-24 bg-surface-tertiary rounded"></div>
        </div>
      </div>
    );
  }

  const isPositive = data.change >= 0;

  return (
    <div className="p-4 bg-surface-secondary border-b border-border">
      <div className="flex items-start justify-between">
        <div>
          <div className="flex items-center gap-3 mb-1">
            <h2 className="text-xl font-bold text-text-primary">{data.symbol}</h2>
            <span className="text-sm text-text-secondary">{data.name}</span>
          </div>
          <div className="flex items-baseline gap-3">
            <span className="text-3xl font-bold text-text-primary">
              ${data.price.toFixed(2)}
            </span>
            <div className={`flex items-center gap-1 ${isPositive ? 'text-success' : 'text-error'}`}>
              {isPositive ? (
                <ArrowUpIcon className="w-4 h-4" />
              ) : (
                <ArrowDownIcon className="w-4 h-4" />
              )}
              <span className="text-lg font-medium">
                ${Math.abs(data.change).toFixed(2)}
              </span>
              <span className="text-lg font-medium">
                ({isPositive ? '+' : ''}{data.changePercent.toFixed(2)}%)
              </span>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
          <div>
            <span className="text-text-muted">Open</span>
            <p className="text-text-primary font-medium">${data.open.toFixed(2)}</p>
          </div>
          <div>
            <span className="text-text-muted">High</span>
            <p className="text-text-primary font-medium">${data.high.toFixed(2)}</p>
          </div>
          <div>
            <span className="text-text-muted">Low</span>
            <p className="text-text-primary font-medium">${data.low.toFixed(2)}</p>
          </div>
          <div>
            <span className="text-text-muted">Prev Close</span>
            <p className="text-text-primary font-medium">${data.previousClose.toFixed(2)}</p>
          </div>
          <div>
            <span className="text-text-muted">Volume</span>
            <p className="text-text-primary font-medium">
              {(data.volume / 1000000).toFixed(2)}M
            </p>
          </div>
          <div>
            <span className="text-text-muted">Time</span>
            <p className="text-text-primary font-medium">
              {new Date(data.timestamp).toLocaleTimeString()}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}