import { getSentimentDistribution } from "@/lib/analytics";
import type { Review } from "@/lib/types";

export function SentimentBar({ reviews, showCounts = false }: { reviews: Review[]; showCounts?: boolean }) {
  const distribution = getSentimentDistribution(reviews);
  const { positive, neutral, negative } = distribution.percentages;

  return (
    <div>
      <div className="flex h-4 overflow-hidden rounded-sm border border-gold/30 bg-parchment">
        <div className="bg-sage" style={{ width: `${positive}%` }} />
        <div className="bg-parchment" style={{ width: `${neutral}%` }} />
        <div className="bg-rust" style={{ width: `${negative}%` }} />
      </div>
      <div className="mt-3 grid grid-cols-3 gap-3 text-sm">
        <div>
          <span className="font-mono font-tabular text-sage">{positive}%</span>
          <span className="ml-2 text-smoke">positif</span>
          {showCounts ? <p className="mt-1 text-xs text-smoke">{distribution.counts.positive} avis</p> : null}
        </div>
        <div>
          <span className="font-mono font-tabular text-charcoal">{neutral}%</span>
          <span className="ml-2 text-smoke">neutre</span>
          {showCounts ? <p className="mt-1 text-xs text-smoke">{distribution.counts.neutral} avis</p> : null}
        </div>
        <div>
          <span className="font-mono font-tabular text-rust">{negative}%</span>
          <span className="ml-2 text-smoke">négatif</span>
          {showCounts ? <p className="mt-1 text-xs text-smoke">{distribution.counts.negative} avis</p> : null}
        </div>
      </div>
    </div>
  );
}