"use client";

import { useState } from "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 active = items[activeIndex];

  if (!active) return null;

  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>

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

      {/* controls: pagination dots + play/pause */}
      <footer className="flex items-center justify-between">
        <div className="flex gap-2">
          {items.map((_, i) => (
            <button
              key={i}
              onClick={() => setActiveIndex(i)}
              aria-label={`Go to testimonial ${i + 1}`}
            >
              {/* TODO: dot styling */}
              {i === activeIndex ? "●" : "○"}
            </button>
          ))}
        </div>

        {/* TODO: play/pause button + auto-rotate timer */}
        <button aria-label="Pause">⏸</button>
      </footer>
    </section>
  );
}