"use client";

import { useRef, useState } from "react";
import Image from "next/image";
import { FaPlay } from "react-icons/fa";

export default function Testimonials() {
  const [playVideo, setPlayVideo] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);

  const handlePlay = () => {
    setPlayVideo(true);

    setTimeout(() => {
      videoRef.current?.play();
    }, 100);
  };

  return (
    <section className="testimonial-section py-5">
      <div className="container">
        <div className="row g-0 testimonial-wrapper">

          {/* Left */}
          <div className="col-lg-6">
            <div className="testimonial-left">
                
              <h2>
                Trusted by <span>Parents</span>
              </h2>

              <p>
                The International School is elated to be honored multiple
                times by the Asian Education Leadership Awards.
              </p>
            </div>
          </div>

          {/* Right */}
          <div className="col-lg-6">
            <div className="testimonial-right">

              {!playVideo && (
                <>
                  <Image
                    src="/images/testimonial/kid.png"
                    alt="Kids"
                    fill
                    className="testimonial-image"
                  />

                  <button
                    className="play-btn"
                    onClick={handlePlay}
                  >
                    <FaPlay />
                  </button>
                </>
              )}

              {playVideo && (
                <video
                  ref={videoRef}
                  controls
                  autoPlay
                  className="testimonial-video"
                >
                  <source
                    src="/videos/testimonial.mp4"
                    type="video/mp4"
                  />
                </video>
              )}

            </div>
          </div>

        </div>
      </div>
    </section>
  );
}