import { Star } from "lucide-react"
import { Badge } from "@/components/ui/badge"

const REVIEW_QUALITY_VARIANTS = {
  high: {
    className:
      "bg-gradient-to-br from-green-50 to-emerald-100 text-green-800 border-green-300 dark:from-green-950/50 dark:to-green-900/50 dark:text-green-100 dark:border-green-500 shadow-sm shadow-green-100 dark:shadow-green-900/20",
    label: "High",
  },
  medium: {
    className:
      "bg-gradient-to-br from-amber-50 to-yellow-100 text-amber-800 border-amber-300 dark:from-amber-950/50 dark:to-amber-900/50 dark:text-amber-100 dark:border-amber-500 shadow-sm shadow-amber-100 dark:shadow-amber-900/20",
    label: "Medium",
  },
  low: {
    className:
      "bg-gradient-to-br from-rose-50 to-red-100 text-rose-800 border-rose-300 dark:from-rose-950/50 dark:to-rose-900/50 dark:text-rose-100 dark:border-rose-500 shadow-sm shadow-rose-100 dark:shadow-rose-900/20",
    label: "Low",
  },
} as const

interface ReviewQualityBadgeProps {
  quality?: string | null
  asButton?: boolean
  onClick?: () => void
  className?: string
}

export function ReviewQualityBadge({
  quality,
  asButton = false,
  onClick,
  className = "",
}: ReviewQualityBadgeProps) {
  if (!quality) return null

  const normalizedQuality = quality.toLowerCase() as keyof typeof REVIEW_QUALITY_VARIANTS
  const variant = REVIEW_QUALITY_VARIANTS[normalizedQuality]

  if (!variant) return null

  const content = (
    <>
      <Star className="h-3 w-3 fill-current" />
      {variant.label}
    </>
  )

  const sharedClasses = `${variant.className} gap-1 rounded-lg px-2.5 py-1.5 text-xs font-semibold border inline-flex items-center ${className}`

  if (asButton) {
    return (
      <button
        onClick={onClick}
        className={`${sharedClasses} hover:scale-105 hover:shadow-md active:scale-100 transition-all duration-200 cursor-pointer`}
        title="Click to view review details"
      >
        {content}
      </button>
    )
  }

  return (
    <Badge variant="secondary" className={sharedClasses}>
      {content}
    </Badge>
  )
}
