"use client";

import { useEffect, useState } from "react";
import { IconPlayerPauseFilled, IconPlayerPlayFilled, IconPoint, IconPointFilled } from '@tabler/icons-react';

type Testimonial = {
  name: string;
  title: string;
  avatar?: string;
  quote: string;
};

type TestimonialsProps = {
  items: Testimonial[];
};

export default function Testimonials({ items }: TestimonialsProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [isPlaying, setIsPlaying] = useState(true);
  const active = items[activeIndex];

  if (!active) return null;

  useEffect(() => {
    if (items.length <= 1 || !isPlaying) return;

    const id = setInterval(() => {
      setActiveIndex((i) => (i + 1) % items.length);
    }, 5000);

    return () => clearInterval(id);
  }, [items.length, isPlaying]);

  return (
    <section className="w-full">
      {/* header: avatar + name + title */}
      <header className="flex items-center gap-3">
        {/* TODO: avatar */}
        <div>
          <div>{active.name}</div>
          <div>{active.title}</div>
        </div>
      </header>

      <blockquote>{active.quote}</blockquote>

      <footer className="flex items-center justify-between">
        <div className="flex mt-3">
          {items.map((_, i) => (
            <button
              key={i}
              onClick={() => setActiveIndex(i)}
              aria-label={`Go to testimonial ${i + 1}`}
            >
              {i === activeIndex ? <IconPointFilled /> : <IconPoint />}
            </button>
          ))}
        </div>

        {/* TODO: play/pause button + auto-rotate timer */}
        <button onClick={() => setIsPlaying(!isPlaying)} aria-label={isPlaying ? "Pause" : "Play"}>
          {isPlaying ? <IconPlayerPauseFilled /> : <IconPlayerPlayFilled />}
        </button>
      </footer>
    </section>
  );
}