"use client";

import { cn } from "@/lib/utils";
import { type SourceTier, tierBgColors } from "./constants";

interface WeightBarProps {
  share: number;
  tier: number;
  isLeading: boolean;
}

export function WeightBar({ share, tier, isLeading }: WeightBarProps) {
  const percent = Math.round(share * 100);
  const safeTier = (tier >= 0 && tier <= 5 ? tier : 5) as SourceTier;

  return (
    <div className="flex items-center gap-2">
      <div className="h-3 bg-muted rounded-full overflow-hidden flex-1">
        <div
          className={cn(
            "h-full rounded-full transition-all",
            tierBgColors[safeTier],
            isLeading ? "opacity-100" : "opacity-60"
          )}
          style={{ width: `${percent}%` }}
        />
      </div>
      <span className="text-xs font-mono text-muted-foreground w-12 text-right">
        {percent.toFixed(1)}%
      </span>
    </div>
  );
}
