'use client';

import { useState } from 'react';

interface Props {
  value: number | null;
  onChange?: (n: number) => void;
  disabled?: boolean;
  readOnly?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

const SIZE_CLASSES: Record<NonNullable<Props['size']>, string> = {
  sm: 'text-base',
  md: 'text-lg',
  lg: 'text-2xl',
};

export function StarPicker({ value, onChange, disabled, readOnly, size = 'md' }: Props) {
  const [hover, setHover] = useState<number | null>(null);
  const display = hover ?? value ?? 0;
  const interactive = !readOnly && Boolean(onChange);

  return (
    <div
      className="inline-flex items-center gap-1"
      role={readOnly ? 'img' : 'group'}
      aria-label={readOnly ? `${value ?? 0} out of 5 stars` : undefined}
    >
      {[1, 2, 3, 4, 5].map((n) => {
        const filled = n <= display;
        const label = `${n} star${n === 1 ? '' : 's'}`;
        if (!interactive) {
          return (
            <span
              key={n}
              aria-hidden="true"
              className={`${SIZE_CLASSES[size]} ${filled ? 'text-amber-500' : 'text-slate-300'}`}
            >
              ★
            </span>
          );
        }
        return (
          <button
            key={n}
            type="button"
            aria-label={label}
            disabled={disabled}
            onClick={() => onChange?.(n)}
            onMouseEnter={() => setHover(n)}
            onMouseLeave={() => setHover(null)}
            onFocus={() => setHover(n)}
            onBlur={() => setHover(null)}
            className={`${SIZE_CLASSES[size]} cursor-pointer transition-colors ${
              filled ? 'text-amber-500' : 'text-slate-300 hover:text-amber-400'
            } disabled:cursor-not-allowed disabled:opacity-60`}
          >
            ★
          </button>
        );
      })}
    </div>
  );
}