"use client";

import { useTranslations } from "next-intl";
import { Star } from "lucide-react";

import { cn } from "@/lib/utils";

const FAKE_RATING = { score: 4.5, count: 2268 } as const;

export function TemplateDetailRating() {
  const t = useTranslations("auto.componentsTemplatesTemplateDetailRating");
  const { score, count } = FAKE_RATING;
  const fullStars = Math.floor(score);
  const hasHalf = score % 1 >= 0.5;
  const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);

  return (
    <div className="mt-3 flex flex-wrap items-center gap-2">
      <div className="flex items-center gap-0.5" aria-label={t("starsAriaLabel", { score })}>
        {Array.from({ length: fullStars }).map((_, index) => (
          <Star
            key={`full-${index}`}
            className="h-4 w-4 fill-amber-400 text-amber-400"
            aria-hidden
          />
        ))}
        {hasHalf ? (
          <span className="relative h-4 w-4" aria-hidden>
            <Star className="absolute inset-0 h-4 w-4 text-gray-200" />
            <Star
              className="absolute inset-0 h-4 w-4 fill-amber-400 text-amber-400"
              style={{ clipPath: "inset(0 50% 0 0)" }}
            />
          </span>
        ) : null}
        {Array.from({ length: emptyStars }).map((_, index) => (
          <Star
            key={`empty-${index}`}
            className="h-4 w-4 text-gray-200"
            aria-hidden
          />
        ))}
      </div>
      <span className="text-sm font-bold text-gray-900">{score}</span>
      <span className="text-sm text-gray-500">
        {t("ratingsCount", { count: count.toLocaleString() })}
      </span>
    </div>
  );
}

interface StatDotProps {
  className?: string;
}

export function StatDot({ className }: StatDotProps) {
  return (
    <span className={cn("h-1 w-1 rounded-full bg-gray-300", className)} aria-hidden />
  );
}
