/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef, useState } from "react"
import { motion } from "framer-motion"
import { FiArrowLeft, FiArrowRight } from "react-icons/fi"
import styles from "./testimonials.module.scss"
import { usePage } from "@inertiajs/react"

export default function Testimonials({testimonials}: any) {
  const sliderRef = useRef<HTMLDivElement>(null)
  const [paused, setPaused] = useState(false)

  const demoTestimonials = [
  {
    id: 1,
    name: "Michael Johnson",
    role: "Forex Trader",
    testimony:
      "TraderPlus has completely changed the way I invest. The signals are timely, the dashboard is intuitive, and I've seen consistent growth in my portfolio over the past year.",
  },
  {
    id: 2,
    name: "Sophia Williams",
    role: "Crypto Investor",
    testimony:
      "I was new to cryptocurrency, but TraderPlus made everything simple. Their educational resources and investment plans gave me the confidence to start investing.",
  },
  {
    id: 3,
    name: "Daniel Thompson",
    role: "Business Owner",
    testimony:
      "The professionalism and transparency of the TraderPlus team stand out. Withdrawals are processed quickly, and customer support is always responsive.",
  },
  {
    id: 4,
    name: "Olivia Martinez",
    role: "Financial Analyst",
    testimony:
      "I've tried several investment platforms, but TraderPlus offers the perfect balance of simplicity, security, and profitability. I highly recommend it to anyone serious about investing.",
  },
  {
    id: 5,
    name: "James Anderson",
    role: "Entrepreneur",
    testimony:
      "The copy trading feature has been a game changer for me. Even with a busy schedule, I'm able to grow my investments without constantly monitoring the markets.",
  },
  {
    id: 6,
    name: "Emma Brown",
    role: "Software Engineer",
    testimony:
      "From account registration to my first successful withdrawal, everything was smooth. TraderPlus has earned my trust with its reliable platform and excellent customer experience.",
  },
];

  const cardWidth = 340 + 24 // card width + gap (match SCSS)

  // ---------- Manual Scroll ----------
  const scroll = (direction: "left" | "right") => {
    if (!sliderRef.current) return
    const slider = sliderRef.current
    setPaused(true) // pause auto-scroll while manually scrolling

    const distance = direction === "left" ? -cardWidth : cardWidth
    slider.scrollBy({ left: distance, behavior: "smooth" })

    // Resume auto-scroll after delay
    setTimeout(() => setPaused(false), 1000)
  }


  return (
    <section className={styles.testimonials}>
      <div className={styles.topRow}>
        <div className={styles.header}>
          <span>Testimonials</span>
          <h2>Trusted by professionals worldwide</h2>
          <p>Real feedback from traders and teams using our platform daily.</p>
        </div>

        <div className={styles.controls}>
          <button onClick={() => scroll("left")} aria-label="Previous">
            <FiArrowLeft />
          </button>
          <button onClick={() => scroll("right")} aria-label="Next">
            <FiArrowRight />
          </button>
        </div>
      </div>

      <motion.div
        ref={sliderRef}
        className={styles.slider}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        onTouchStart={() => setPaused(true)}
        onTouchEnd={() => setPaused(false)}
        drag="x"
        dragConstraints={{ left: -900, right: 0 }}
      >
        {demoTestimonials?.map((item: any, index: any) => (
          <motion.article
            key={index}
            className={styles.card}
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: index * 0.08 }}
          >
            <blockquote>“{item.testimony}”</blockquote>
            <footer>
              <div className={styles.avatar} />
              <div className={styles.meta}>
                <strong>{item.name}</strong>
                <span>{item.role}</span>
              </div>
            </footer>
          </motion.article>
        ))}
      </motion.div>
    </section>
  )
}