"use client";

import { useEffect, useState } from "react";

import {
  Carousel,
  CarouselApi,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";

const testimonials = [
  {
    company: "clerk",
    avatar: "nick-parsons.webp",
    name: "Nick Parsons",
    role: "Director of Marketing, Clerk",
    review: "“our team saved countless hours after switching to webtics”",
  },
  {
    company: "raycast",
    avatar: "thomas-paul-mann.webp",
    name: "Thomas Paul Mann",
    role: "CEO, Raycast",
    review:
      "“from data chaos to clarity - webtics delivers immediate results.”",
  },
  {
    company: "vercel",
    avatar: "guillermo-rauch.webp",
    name: "Guillermo Rauch",
    role: "CEO, Vercel",
    review:
      "“webtics delivers powerful insights that turn complex data into actionable decisions”",
  },
];

export function Testimonials() {
  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    if (!api) {
      return;
    }

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap());
    });
  }, [api]);

  return (
    <div className="py-16">
      <Carousel
        setApi={setApi}
        className="max-w-screen-xl mx-auto px-4 lg:px-8"
      >
        <CarouselContent>
          {testimonials.map((testimonial) => (
            <CarouselItem
              key={testimonial.company}
              className="flex flex-col items-center cursor-grab"
            >
              <img
                alt={`${testimonial.company} logo`}
                draggable="false"
                src={`https://assets.rapidui.dev/testimonials/companies/${testimonial.company}.svg`}
                className="mb-7"
              />
              <p className="max-w-xl text-balance text-center text-xl sm:text-2xl">
                {testimonial.review}
              </p>
              <h5 className="mt-5 font-medium text-slate-600">
                {testimonial.name}
              </h5>
              <h5 className="mt-1.5 font-medium text-slate-900/40">
                {testimonial.role}
              </h5>
              <img
                alt={testimonial.name}
                src={`https://assets.rapidui.dev/testimonials/people/${testimonial.avatar}`}
                className="mt-5 size-12 rounded-full bg-muted"
              />
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>

      {/* circle indicators */}
      <div className="mt-6 text-center">
        <div className="flex items-center justify-center gap-2">
          {testimonials.map((_, index) => (
            <button
              key={index}
              className={`size-1.5 rounded-full transition-all ${
                index === current ? "bg-primary" : "bg-primary/35"
              }`}
              onClick={() => api?.scrollTo(index)}
            />
          ))}
        </div>
      </div>
    </div>
  );
}