Build an interactive Star Rating component with hover and click states.

import React, { useState } from 'react';
import { Star } from 'lucide-react';

const StarRating = ({ length = 5 }) => {
  const [selectedStar, setSelectedStar] = __PH_21__(0);
  const [hover, setHover] = __PH_22__(0);

  return (
    <div onMouseLeave={() => setHover(0)} className='flex gap-2 text-2xl font-bold font-mono'>
      {Array.__PH_15__({ length }).map((_, index) => {
        const starValue = index + 1;
        const isActive = hover >= starValue || (!hover && selectedStar >= starValue);
        return (
          <span
            key={index}
            className={isActive ? 'text-amber-400 scale-110' : 'text-slate-300 opacity-50'}
            onMouseEnter={() => setHover(starValue)}
            onClick={() => setSelectedStar(starValue)}
            style={{ cursor: 'pointer', transition: 'all 0.2s' }}
          >
            &#9733;
          </span>
        );
      })}
    </div>
  );
};