import { IconStar, IconStarFilled } from "@components/icons.tsx";
import { Signal, useSignal } from "@preact/signals";
import { useState } from "preact/hooks";

export const SmallRating = (
  { max = 5, rating }: { max?: number; rating: number },
) => {
  return (
    <div
      class="flex gap-1 rounded"
      style={{ filter: "drop-shadow(0px 3px 3px black)" }}
    >
      {Array.from({ length: max }).map((_, i) => {
        return (
          <span>
            {(i + 1) <= rating
              ? <IconStarFilled class="w-3 h-3" />
              : <IconStar class="w-3 h-3" />}
          </span>
        );
      })}
    </div>
  );
};

export const Rating = (
  { max, rating = useSignal(0) }: {
    max?: number;
    defaultRating: number;
    rating: Signal<number | undefined>;
  },
) => {
  const [hover, setHover] = useState(0);

  const ratingValue = rating.value || 0;

  return (
    <div
      class="flex items-center gap-2 px-5 rounded-2xl bg-gray-200 z-10 h-full"
      style={{ color: "var(--foreground)", background: "var(--background)" }}
    >
      {Array.from({ length: max || 5 }).map((_, i) => {
        return (
          <span
            class={`cursor-pointer opacity-${
              (i + 1) <= ratingValue ? 100 : (i + 1) <= hover ? 20 : 100
            }`}
            onMouseOver={() => setHover(i + 1)}
            onClick={() => (rating.value = i + 1)}
          >
            {(i + 1) <= ratingValue || (i + 1) <= hover
              ? <IconStarFilled class="w-4 h-4" />
              : <IconStar class="w-4 h-4" />}
          </span>
        );
      })}
    </div>
  );
};