'use client';

import { Star } from 'lucide-react';
import { cn } from '@/lib/utils';

interface StarRatingProps {
  rating: number;
  max?: number;
  size?: 'sm' | 'md' | 'lg';
  showValue?: boolean;
  variant?: 'default' | 'light';
  className?: string;
}

const sizeClasses = {
  sm: 'h-3.5 w-3.5',
  md: 'h-4 w-4',
  lg: 'h-5 w-5',
};

export function StarRating({
  rating,
  max = 5,
  size = 'md',
  showValue = false,
  variant = 'default',
  className,
}: StarRatingProps) {
  const iconSize = sizeClasses[size];

  return (
    <div className={cn('inline-flex items-center gap-1', className)}>
      <div className="flex items-center">
        {Array.from({ length: max }, (_, i) => {
          const filled = rating >= i + 1;
          const partial = !filled && rating > i;
          return (
            <Star
              key={i}
              className={cn(
                iconSize,
                filled || partial
                  ? 'fill-[var(--home-amber)] text-[var(--home-amber)]'
                  : 'fill-slate-200 text-slate-200'
              )}
            />
          );
        })}
      </div>
      {showValue && (
        <span
          className={cn(
            'text-sm font-semibold tabular-nums',
            variant === 'light' ? 'text-white' : 'text-slate-900'
          )}
        >
          {rating.toFixed(1)}
        </span>
      )}
    </div>
  );
}

interface RatingBarProps {
  label: string;
  value: number;
  max?: number;
}

export function RatingBar({ label, value, max = 5 }: RatingBarProps) {
  const pct = Math.min(100, (value / max) * 100);

  return (
    <div className="flex items-center gap-3 text-sm">
      <span className="w-28 shrink-0 text-muted">{label}</span>
      <div className="flex-1 h-2 rounded-full bg-slate-100 overflow-hidden">
        <div
          className="h-full rounded-full bg-[var(--home-amber)] transition-all"
          style={{ width: `${pct}%` }}
        />
      </div>
      <span className="w-8 text-right font-semibold text-slate-900 tabular-nums">
        {value.toFixed(1)}
      </span>
    </div>
  );
}