import IconStar from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star.tsx";
import IconStarFilled from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star-filled.tsx";

export const Star = (
  { max = 5, rating = 3 }: { max?: number; rating: number },
) => {
  console.log({ max, rating });
  return (
    <div
      class="flex gap-2 px-4 py-2 rounded-2xl bg-gray-200 z-10"
      style={{ color: "#1F1F1F" }}
    >
      {Array.from({ length: max }).map((_, i) => {
        if ((i + 1) <= rating) {
          return <IconStarFilled class="w-4 h-4" />;
        }
        return <IconStar class="w-4 h-4" />;
      })}
    </div>
  );
};