"use client";

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

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

import type { Testimonial } from "./testimonials-data";

export interface TestimonialCardProps {
  testimonial: Testimonial;
  className?: string;
}

export function TestimonialCard({
  testimonial,
  className,
}: TestimonialCardProps) {
  const t = useTranslations("auto.componentsSectionsTestimonialCard");
  const { name, role, company, quote, initials } = testimonial;

  return (
    <article
      className={cn(
        "flex flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-lg",
        className
      )}
    >
      <p className="sr-only">{t("ratingLabel")}</p>
      <div className="flex items-center gap-1" aria-hidden>
        {Array.from({ length: 5 }).map((_, index) => (
          <Star
            key={index}
            className="h-4 w-4 fill-amber-400 text-amber-400"
          />
        ))}
      </div>

      <blockquote className="mt-4 flex-1 text-sm leading-relaxed text-neutral-600">
        &ldquo;{quote}&rdquo;
      </blockquote>

      <footer className="mt-6 flex items-center gap-3 border-t border-gray-100 pt-5">
        <div
          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-primary-100 font-heading text-sm font-semibold text-primary-700"
          aria-hidden
        >
          {initials}
        </div>
        <div>
          <cite className="not-italic font-heading text-sm font-semibold text-neutral-900">
            {name}
          </cite>
          <p className="text-xs text-neutral-500">
            {role} · {company}
          </p>
        </div>
      </footer>
    </article>
  );
}
