"use client";

import type { Review } from "@/lib/types";
import { CountryFlag } from "@/components/CountryFlag";
import { DescriptorChip } from "@/components/DescriptorChip";
import { SourceBadge } from "@/components/SourceBadge";
import { Badge } from "@/components/ui/badge";
import { getCuvee } from "@/lib/mock-data/cuvees";
import { formatDateFr } from "@/lib/constants";
import { cn, sentimentToScore } from "@/lib/utils";

export function MentionItem({ review, onOpen }: { review: Review; onOpen: (review: Review) => void }) {
  const cuvee = getCuvee(review.cuveeId);
  return (
    <button
      type="button"
      onClick={() => onOpen(review)}
      className="block w-full rounded-md border border-gold/25 bg-ivory-warm p-4 text-left transition-colors hover:bg-parchment/70"
    >
      <div className="flex flex-wrap items-center gap-2">
        <SourceBadge source={review.source} />
        <CountryFlag code={review.market} />
        <Badge tone={review.sentiment === "positive" ? "sage" : review.sentiment === "negative" ? "rust" : "neutral"}>
          {sentimentToScore(review.sentimentScore)}/100
        </Badge>
        <span className="font-mono text-xs text-smoke">{formatDateFr(review.date)}</span>
      </div>
      <div className="mt-3 flex items-baseline justify-between gap-4">
        <p className="font-serif text-xl font-semibold text-bordeaux-deep">
          {cuvee.name} <span className="font-mono text-base text-smoke">{review.vintage}</span>
        </p>
        <span className="font-mono text-sm text-smoke">{review.rating ?? "—"}</span>
      </div>
      <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-charcoal">{review.textFrench}</p>
      <div className="mt-3 flex flex-wrap gap-2">
        {review.descriptors.slice(0, 4).map((descriptor) => (
          <DescriptorChip key={descriptor} term={descriptor} sentiment={review.sentimentScore} />
        ))}
      </div>
      <div
        className={cn(
          "mt-3 h-1 rounded-full",
          review.sentiment === "positive" && "bg-sage",
          review.sentiment === "neutral" && "bg-gold/50",
          review.sentiment === "negative" && "bg-rust"
        )}
      />
    </button>
  );
}