"use client";

import { useRef } from "react";
import { ArrowIcon, StarIcon } from "./icons";

export type CarouselTestimonial = {
  quote: string;
  author: string;
  role: string;
  rating: number;
};

const avatarColors = ["bg-coral", "bg-teal", "bg-amber"];

function initials(name: string) {
  return name
    .replace(/^The\s+/i, "")
    .split(/\s+/)
    .slice(0, 2)
    .map((w) => w[0])
    .join("")
    .toUpperCase();
}

/** Horizontal scroll-snap carousel with arrow controls, like the reference. */
export function TestimonialCarousel({ items }: { items: CarouselTestimonial[] }) {
  const trackRef = useRef<HTMLDivElement>(null);

  const scrollBy = (dir: 1 | -1) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector<HTMLElement>("[data-card]");
    const step = card ? card.offsetWidth + 24 : 360;
    track.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <div>
      <div
        ref={trackRef}
        className="flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        {items.map((t, i) => (
          <figure
            key={`${t.author}-${i}`}
            data-card
            className="card-soft w-[85vw] shrink-0 snap-start p-7 sm:w-[26rem]"
          >
            <div className="flex items-center gap-3">
              <span
                className={`flex h-11 w-11 items-center justify-center rounded-full text-sm font-semibold text-white ${avatarColors[i % 3]}`}
                aria-hidden="true"
              >
                {initials(t.author)}
              </span>
              <div>
                <p className="text-[0.95rem] font-semibold text-ink">{t.author}</p>
                <p className="text-[0.78rem] text-ink-mute">{t.role}</p>
              </div>
            </div>
            <blockquote className="mt-4 text-[0.95rem] leading-relaxed text-ink-soft">
              “{t.quote}”
            </blockquote>
            <figcaption className="mt-5 flex items-center gap-2 border-t border-linen pt-4 text-[0.78rem] text-ink-mute">
              <span className="flex gap-0.5 text-amber">
                {Array.from({ length: t.rating }).map((_, s) => (
                  <StarIcon key={s} className="h-3.5 w-3.5" />
                ))}
              </span>
              5.0 Reviews
            </figcaption>
          </figure>
        ))}
      </div>

      <div className="mt-6 flex justify-center gap-3">
        <button
          type="button"
          onClick={() => scrollBy(-1)}
          aria-label="Previous testimonials"
          className="flex h-10 w-10 items-center justify-center rounded-full border border-linen bg-white text-ink-soft transition-colors hover:border-teal hover:text-teal"
        >
          <ArrowIcon className="h-4 w-4 rotate-180" />
        </button>
        <button
          type="button"
          onClick={() => scrollBy(1)}
          aria-label="Next testimonials"
          className="flex h-10 w-10 items-center justify-center rounded-full bg-teal text-white transition-colors hover:bg-teal-dark"
        >
          <ArrowIcon className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}