interface ReviewProgressProps {
  reviews: { rating: number }[];
}

export default function ReviewProgress({ reviews }: ReviewProgressProps) {
  const total = reviews.length;
  
  const breakdown = [5, 4, 3, 2, 1].map(rating => {
    const count = reviews.filter(r => Math.round(r.rating) === rating).length;
    const percentage = total > 0 ? (count / total) * 100 : 0;
    return { rating, count, percentage };
  });

  const average = total > 0
    ? reviews.reduce((sum, r) => sum + r.rating, 0) / total
    : 0;

  return (
    <div className="bg-white rounded-xl p-6 shadow-sm">
      <div className="flex items-center gap-6 mb-6">
        <div className="text-center">
          <p className="text-4xl font-bold">{average.toFixed(1)}</p>
          <div className="flex justify-center mt-1">
            {[1, 2, 3, 4, 5].map(i => (
              <span key={i} className={`text-lg ${i <= Math.round(average) ? 'text-yellow-400' : 'text-gray-300'}`}>
                ★
              </span>
            ))}
          </div>
          <p className="text-sm text-gray-500 mt-1">{total} รีวิว</p>
        </div>
        
        <div className="flex-1 space-y-2">
          {breakdown.map(({ rating, count, percentage }) => (
            <div key={rating} className="flex items-center gap-2">
              <span className="text-sm w-6">{rating} ★</span>
              <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
                <div
                  className="h-full bg-yellow-400 rounded-full"
                  style={{ width: `${percentage}%` }}
                />
              </div>
              <span className="text-sm text-gray-500 w-8">{count}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}