"use client";

import { useState } from "react";

import { testimonials } from "@/data/site";

function QuoteIcon() {
  return (
    <svg className="quote-icon" width="29" height="29" viewBox="0 0 24 24" aria-hidden>
      <path
        fill="currentColor"
        d="M7.2 19.2c-1.7 0-3.1-.6-4.1-1.7S1.5 14.8 1.5 13c0-2 .5-3.8 1.6-5.5S5.7 4.5 7.8 3.6l.9 1.6c-1.5.7-2.6 1.6-3.3 2.8-.7 1.1-1 2.3-1 3.5 0 .4.1.6.4.7.7.2 1.3.6 1.8 1.1.5.5.8 1.2.8 2 0 1-.3 1.8-1 2.5-.7.7-1.5 1-2.2 1.4zm11.2 0c-1.7 0-3.1-.6-4.1-1.7s-1.6-2.7-1.6-4.5c0-2 .5-3.8 1.6-5.5s2.6-3 4.7-3.9l.9 1.6c-1.5.7-2.6 1.6-3.3 2.8-.7 1.1-1 2.3-1 3.5 0 .4.1.6.4.7.7.2 1.3.6 1.8 1.1.5.5.8 1.2.8 2 0 1-.3 1.8-1 2.5-.6.7-1.4 1.4-2.2 1.4z"
      />
    </svg>
  );
}

export default function Testimonials({ title }: { title?: string }) {
  const [index, setIndex] = useState(0);
  const visible = [0, 1, 2].map((offset) => {
    const item = testimonials[(index + offset) % testimonials.length];
    return { item, key: `${index}-${offset}` };
  });

  return (
    <section className="testimonial-main-container" id="testimonial">
      <div className="container-fluid">
        <div className="section-title" style={{ textAlign: "center" }}>
          <h2>{title || "نظر برخی مراجعه کنندگان عزیز"}</h2>
          <p className="kicker latin">USER COMMENTS</p>
        </div>

        <div className="testimonial-slider">
          <div className="testimonial-track">
            {visible.map(({ item, key }) => (
              <article className="testimonial-inner" key={key}>
                <div className="testimonial-right-inner">
                  <QuoteIcon />
                  <p>{item.text}</p>
                  <cite>{item.author}</cite>
                </div>
              </article>
            ))}
          </div>

          <div className="testimonial-dots">
            {testimonials.map((_, i) => (
              <button
                key={i}
                type="button"
                className={i === index ? "active" : undefined}
                aria-label={`نظر ${i + 1}`}
                onClick={() => setIndex(i)}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}