import { useNavigate } from 'react-router-dom';
import type { VolumeAnomaly } from '../../hooks/useAnomalies';
import { formatVolume, timeAgo } from '../../utils/format';

interface Props {
  anomaly: VolumeAnomaly;
}

export default function AnomalyCard({ anomaly }: Props) {
  const navigate = useNavigate();
  const scoreLabel = `${anomaly.score.toFixed(1)}x`;
  const ago = timeAgo(anomaly.detectedAt);

  return (
    <div className="an-card" onClick={() => navigate(`/market/${anomaly.marketId}`)}>
      <div className="an-header">
        <span className="an-score">{scoreLabel}</span>
        <div className="an-title">{anomaly.question ?? 'Unknown market'}</div>
      </div>

      <div className="an-row">
        <div className="an-stat">
          <span className="an-label">24h Vol</span>
          <span className="an-value">{formatVolume(anomaly.volume24h)}</span>
        </div>
        <div className="an-stat">
          <span className="an-label">Avg</span>
          <span className="an-value">{formatVolume(anomaly.avgVolume)}</span>
        </div>
        <div className="an-stat">
          <span className="an-label">Liq</span>
          <span className="an-value">{formatVolume(anomaly.liquidity)}</span>
        </div>
      </div>

      <div className="an-footer">
        {anomaly.category && <span className="an-cat">{anomaly.category}</span>}
        {ago && <span className="an-ago">{ago}</span>}
      </div>
    </div>
  );
}