import { useState } from 'react'
import { Star } from 'lucide-react'

export default function RatingComponent({ data, onUpdate }) {
  const [rating, setRating] = useState(data?.rating || 0)
  const [hasRated, setHasRated] = useState(false)

  const handleRate = (value) => {
    setRating(value)
    setHasRated(true)
  }

  return (
    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 my-6">
      <div className="flex items-center space-x-2 mb-4">
        <Star className="h-5 w-5 text-yellow-500" />
        <h3 className="text-lg font-semibold text-gray-900">Rate This Section</h3>
      </div>

      <div className="flex items-center space-x-1 mb-4">
        {[1, 2, 3, 4, 5].map((value) => (
          <button
            key={value}
            onClick={() => handleRate(value)}
            className={`p-1 transition-colors ${
              value <= rating ? 'text-yellow-500' : 'text-gray-300'
            }`}
            disabled={hasRated}
          >
            <Star className="h-6 w-6 fill-current" />
          </button>
        ))}
      </div>

      {hasRated ? (
        <p className="text-yellow-700 font-medium">Thanks for your rating!</p>
      ) : (
        <p className="text-yellow-600">How helpful was this section?</p>
      )}
    </div>
  )
}