"use client";

import { useState } from "react";
import { testimonials } from "@/data/pages";
import styles from "@/app/about/about.module.css";

export default function CommentCarousel() {
  const [index, setIndex] = useState(0);
  const total = testimonials.length;
  const item = testimonials[index];

  const prev = () => setIndex((i) => (i - 1 + total) % total);
  const next = () => setIndex((i) => (i + 1) % total);

  return (
    <div className={styles.comments}>
      <div className={styles.commentHead}>
        <div className={styles.arrows}>
          <button
            className={styles.arrowBtn}
            type="button"
            aria-label="Previous review"
            onClick={prev}
          >
            <img
              className={styles.arrowPrev}
              src="/images/icons/chevron.svg"
              alt=""
              width={8}
              height={14}
            />
          </button>
          <button
            className={styles.arrowBtn}
            type="button"
            aria-label="Next review"
            onClick={next}
          >
            <img src="/images/icons/chevron.svg" alt="" width={8} height={14} />
          </button>
        </div>
        <div className={styles.sectionHead}>
          <h2 className={styles.sectionTitle}>People comment</h2>
          <p className={styles.sectionSub}>
            some of our most crowded categories
          </p>
        </div>
        <span className={styles.commentCount} aria-live="polite">
          {index + 1} / {total}
        </span>
      </div>

      <div className={styles.commentTrack} key={item.meta}>
        <p className={styles.quote}>{item.body}</p>
        <p className={styles.meta}>{item.meta}</p>
      </div>

      <div className={styles.dots} role="tablist" aria-label="Reviews">
        {testimonials.map((review, i) => (
          <button
            key={review.meta}
            type="button"
            role="tab"
            aria-selected={i === index}
            aria-label={`Show review ${i + 1}`}
            className={i === index ? styles.dotActive : styles.dot}
            onClick={() => setIndex(i)}
          />
        ))}
      </div>
    </div>
  );
}