import { useCurrency } from '@/hooks/use-currency';
import { cn } from '@/lib/utils';
import { TMarketOutcome } from '@/types/market.types';

const DEFAULT_COLORS = ['#22c55e', '#ef4444', '#3b82f6', '#a855f7', '#f59e0b'];

interface OutcomeProbabilityProps {
  outcomes: TMarketOutcome[];
  size?: 'sm' | 'md';
  changes?: Record<number, number | null>;
}

export default function OutcomeProbability({
  outcomes,
  size = 'sm',
  changes,
}: OutcomeProbabilityProps) {
  const { format } = useCurrency();
  return (
    <div className="w-full space-y-1.5">
      {outcomes.map((outcome, i) => {
        const color =
          outcome.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
        const pct = Math.round((outcome.probability ?? 0) * 100);
        const change = changes?.[outcome.id] ?? null;

        return (
          <div key={outcome.id}>
            <div className="mb-0.5 flex items-center justify-between">
              <span
                className={cn(
                  'font-medium',
                  size === 'sm' ? 'text-xs' : 'text-sm',
                )}
              >
                {outcome.title}
              </span>
              <div className="flex items-center gap-2">
                {change !== null && (
                  <span
                    className={cn(
                      'text-xs font-medium',
                      change > 0
                        ? 'text-green-500'
                        : change < 0
                          ? 'text-red-500'
                          : 'text-black/30 dark:text-white/30',
                    )}
                  >
                    {change > 0 ? '+' : ''}
                    {change}%
                  </span>
                )}
                <span
                  className={cn(
                    'font-semibold',
                    size === 'sm' ? 'text-xs' : 'text-sm',
                  )}
                  style={{ color }}
                >
                  {format(pct / 100)}
                </span>
              </div>
            </div>
            <div className="h-3 w-full overflow-hidden rounded-full bg-black/10 dark:bg-white/10">
              <div
                className="h-full rounded-full transition-all duration-500"
                style={{ width: `${pct}%`, backgroundColor: color }}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
}