'use client'

import { useTranslations } from 'next-intl'

interface RatingFilterProps {
  value: number | null
  onChange: (rating: number | null) => void
  ratings?: { value: number; label: string; icon: string }[]
}

const STAR_ICONS: Record<number, string> = {
  5: '★★★★★',
  4: '★★★★☆',
  3: '★★★☆☆',
  2: '★★☆☆☆',
  1: '★☆☆☆☆',
}

export default function RatingFilter({ value, onChange, ratings }: RatingFilterProps) {
  const t = useTranslations('Filters')
  const list =
    ratings ??
    [5, 4, 3, 2, 1].map((n) => ({
      value: n,
      label: n === 5 ? t('stars', { count: n }) : t('starsAndAbove', { count: n }),
      icon: STAR_ICONS[n],
    }))
  return (
    <div className="space-y-2">
      {list.map((rating) => (
        <button
          key={rating.value}
          onClick={() => onChange(rating.value === value ? null : rating.value)}
          className={`w-full flex items-center justify-between px-3 py-2 rounded-lg transition-all ${
            value === rating.value
              ? 'bg-primary/10 border border-primary/20'
              : 'hover:bg-gray-50'
          }`}
        >
          <span className="text-sm font-medium text-dark">{rating.label}</span>
          <div className="flex text-yellow-400">{rating.icon}</div>
        </button>
      ))}
    </div>
  )
}