Testimonial 5

"use client";

import { Quote, Star } from "lucide-react";
import Image from "next/image";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { TestimonialContent } from "../_types/testimonial";
import { defaultTestimonial5Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

// Stable keys for the star row — the rating is never more than five.
const starSlots = ["one", "two", "three", "four", "five"];

const arrowClasses =
  "static size-12 translate-x-0 translate-y-0 border-current/20 bg-transparent text-current shadow-none before:shadow-none hover:bg-current/5 dark:bg-transparent";

/** Quote cards in a carousel on a coloured band, arrows beside the header. */
export default function Testimonial5({
  content = defaultTestimonial5Content,
  surface = "secondary",
}: {
  content?: TestimonialContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <Carousel className="flex flex-col gap-10" opts={{ align: "start" }}>
          <SectionHeader
            action={
              <div className="flex items-center gap-2">
                <CarouselPrevious className={arrowClasses} variant="outline" />
                <CarouselNext className={arrowClasses} variant="outline" />
              </div>
            }
            description={content.description}
            eyebrow={content.eyebrow}
            title={content.title}
            tone={toneFor(surface)}
          />

          <CarouselContent className="-ml-5">
            {content.items.map((item) => (
              <CarouselItem
                className="basis-full pl-5 md:basis-1/2 lg:basis-1/3"
                key={item.name}
              >
                <figure className="flex h-full flex-col justify-between rounded-lg bg-card p-8">
                  <div>
                    <Quote className="size-8 text-secondary" />
                    {item.rating && (
                      <div className="mt-5 flex gap-0.5">
                        {starSlots.slice(0, item.rating).map((slot) => (
                          <Star
                            className="size-4 fill-primary text-primary"
                            key={`${item.name}-${slot}`}
                          />
                        ))}
                      </div>
                    )}
                    <blockquote className="mt-5 text-primary leading-relaxed">
                      {item.quote}
                    </blockquote>
                  </div>

                  <figcaption className="mt-8 flex items-center gap-4 border-border border-t pt-6">
                    <Image
                      alt={item.avatar.alt}
                      className="size-12 rounded-md object-cover"
                      height={48}
                      src={item.avatar.src}
                      width={48}
                    />
                    <div>
                      <p className="font-medium text-primary text-sm">
                        {item.name}
                      </p>
                      <p className="text-muted-foreground text-xs">
                        {item.context}
                      </p>
                    </div>
                  </figcaption>
                </figure>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
}