"use client";

import { cn } from "@/lib/utils";

interface TrustBarProps {
  score: number;
  size?: "sm" | "md";
}

export function TrustBar({ score, size = "md" }: TrustBarProps) {
  const percent = Math.round(score * 100);

  return (
    <div className="flex items-center gap-2">
      <div
        className={cn(
          "bg-muted rounded-full overflow-hidden flex-1",
          size === "sm" ? "h-1" : "h-1.5"
        )}
      >
        <div
          className={cn(
            "h-full rounded-full transition-all",
            score >= 0.7
              ? "bg-emerald-500"
              : score >= 0.4
              ? "bg-amber-500"
              : "bg-red-500"
          )}
          style={{ width: `${percent}%` }}
        />
      </div>
      <span className="text-xs font-mono text-muted-foreground w-8">
        {score.toFixed(2)}
      </span>
    </div>
  );
}
