import React from 'react';

export interface RatingBreakdownProps {
  ratings: number;
  reviews: number;
  count: number;
}

const RatingBreakdown = ({
  ratings = 5,
  reviews = 0,
  count = 0,
}: RatingBreakdownProps) => (
  <section>
    <span>
      <span>{ratings} </span>
      <i
        className="fa-solid fa-sharp fa-star text-amber-500"
        aria-hidden="true"
      />
      <span className="float-right text-xs whitespace-nowrap text-_-neutrals-300">
        {reviews} review(s)
      </span>
    </span>

    <div className="w-full bg-_-neutrals-300 rounded-full h-2.5 dark:bg-gray-7 mb-2 mt-2">
      <div
        className="bg-_-obi-dark h-2.5 rounded-full"
        style={{ width: `${((100 * reviews) / count).toFixed(0)}%` }}
      ></div>
    </div>
  </section>
);

export default RatingBreakdown;