"use client";

import Image from "next/image";
import React, { useCallback } from "react";
import { Container } from "@/components/Container";
import useEmblaCarousel from "embla-carousel-react";
import { EmblaCarouselType } from "embla-carousel";
import Autoplay from "embla-carousel-autoplay";
import { DotButton, useDotButton } from "./EmblaCarouselDotButton";
import {
	NextButton,
	PrevButton,
	usePrevNextButtons,
} from "./EmblaCarouselArrowButtons";

import userOneImg from "../../public/img/user1.jpg";
import userTwoImg from "../../public/img/user2.jpg";
import userThreeImg from "../../public/img/user3.jpg";

export const Testimonials = () => {
	const [emblaRef, emblaApi] = useEmblaCarousel(
		{ dragFree: true, loop: true },
		[Autoplay({ delay: 7000, stopOnInteraction: false })],
	);
	const onNavButtonClick = useCallback((emblaApi: EmblaCarouselType) => {
		const autoplay = emblaApi?.plugins()?.autoplay;
		if (!autoplay) return;

		const resetOrStop =
			autoplay.options.stopOnInteraction === false
				? autoplay.reset
				: autoplay.stop;

		resetOrStop();
	}, []);

	const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(
		emblaApi,
		onNavButtonClick,
	);

	const {
		prevBtnDisabled,
		nextBtnDisabled,
		onPrevButtonClick,
		onNextButtonClick,
	} = usePrevNextButtons(emblaApi, onNavButtonClick);

	return (
		// <div className="bg-[#574964]">
		<Container className="sm:px-14 pb-28">
			<div className="relative">
				<div className="overflow-hidden" ref={emblaRef}>
					<ul className="flex ml-[calc(40px_*_-1)]">
						<li className="basis-full lg:basis-1/3 pl-10 min-w-0 flex-shrink-0 flex-grow-0">
							<div className="flex flex-col justify-between w-full h-full bg-white border border-[#efe9dc] p-8 xl:px-14 rounded-2xl xl:py-14 dark:bg-trueGray-800">
								<p className="text-lg xl:text-2xl leading-normal ">
									Honestly, I’m so thankful we found Trustmark. They helped us
									understand what was going on and made the whole process feel
									far less stressful.
								</p>

								<Avatar
									image={userOneImg}
									name="Emily Rodriguez"
									title="VP Sales at Google"
								/>
							</div>
						</li>
						<li className="basis-full lg:basis-1/3 pl-10 min-w-0 flex-shrink-0 flex-grow-0">
							<div className="flex flex-col justify-between w-full h-full bg-white border border-[#efe9dc] p-8 xl:px-14 rounded-2xl xl:py-14 dark:bg-trueGray-800">
								<p className="text-lg xl:text-2xl leading-normal ">
									After weeks of confusion, Trustmark brought real clarity. I
									appreciated how patient and respectful they were. I would
									absolutely recommend them.
								</p>

								<Avatar
									image={userTwoImg}
									name="Michael Thompson"
									title="Lead marketer at Netflix"
								/>
							</div>
						</li>
						<li className="basis-full lg:basis-1/3 pl-10 min-w-0 flex-shrink-0 flex-grow-0">
							<div className="flex flex-col justify-between w-full h-full bg-white border border-[#efe9dc] p-8 xl:px-14 rounded-2xl xl:py-14 dark:bg-trueGray-800">
								<p className="text-lg xl:text-2xl leading-normal ">
									This was a difficult family situation, and Trustmark handled
									it with care. We felt supported every step of the way. Very
									grateful for their help.
								</p>

								<Avatar
									image={userThreeImg}
									name="Lauren Hayes"
									title="Co-founder of Acme Inc"
								/>
							</div>
						</li>
						<li className="basis-full lg:basis-1/3 pl-10 min-w-0 flex-shrink-0 flex-grow-0">
							<div className="flex flex-col justify-between w-full h-full bg-white border border-[#efe9dc] p-8 xl:px-14 rounded-2xl xl:py-14 dark:bg-trueGray-800">
								<p className="text-lg xl:text-2xl leading-normal ">
									Trustmark are true professionals. Everything was explained in
									a way that actually made sense. Thank you for making this
									easier.
								</p>

								<Avatar
									image={userTwoImg}
									name="Brian Collins"
									title="Lead marketer at Netflix"
								/>
							</div>
						</li>
						<li className="basis-full lg:basis-1/3 pl-10 min-w-0 flex-shrink-0 flex-grow-0">
							<div className="flex flex-col justify-between w-full h-full bg-white border border-[#efe9dc] p-8 xl:px-14 rounded-2xl xl:py-14 dark:bg-trueGray-800">
								<p className="text-lg xl:text-2xl leading-normal ">
									We had questions about shared ownership and next steps, and
									Trustmark helped us sort everything out clearly. It saved us a
									lot of time and stress.
								</p>

								<Avatar
									image={userThreeImg}
									name="Natalie Brooks"
									title="Co-founder of Acme Inc"
								/>
							</div>
						</li>
						<li className="basis-full lg:basis-1/3 pl-10 min-w-0 flex-shrink-0 flex-grow-0">
							<div className="flex flex-col justify-between w-full h-full bg-white border border-[#efe9dc] p-8 xl:px-14 rounded-2xl xl:py-14 dark:bg-trueGray-800">
								<p className="text-lg xl:text-2xl leading-normal ">
									Our family had a lot of questions, and Trustmark took the time
									to walk us through everything. We’re very grateful and would
									recommend them without hesitation.
								</p>

								<Avatar
									image={userTwoImg}
									name="Jonathan Keller"
									title="Lead marketer at Netflix"
								/>
							</div>
						</li>
					</ul>
				</div>
				<PrevButton
					onClick={onPrevButtonClick}
					disabled={prevBtnDisabled}
					className="absolute left-0 sm:-left-12 top-1/2 -translate-y-1/2 group-hover:text-white"
				/>
				<NextButton
					onClick={onNextButtonClick}
					disabled={nextBtnDisabled}
					className="absolute right-0 sm:-right-12 top-1/2 -translate-y-1/2 group-hover:text-white"
				/>
			</div>
			<div className="flex items-center justify-center gap-3 mt-5">
				{scrollSnaps.map((_, index) => (
					<DotButton
						key={index}
						onClick={() => onDotButtonClick(index)}
						className={"w-3 h-3 rounded-full border border-primaryBtn transition-all duration-300 ease-in-out".concat(
							index === selectedIndex ? " bg-primaryBtn" : " bg-transparent",
						)}
					/>
				))}
			</div>
		</Container>
		// </div>
	);
};

interface AvatarProps {
	image: any;
	name: string;
	title: string;
}

function Avatar(props: Readonly<AvatarProps>) {
	return (
		<div className="flex items-center mt-8 space-x-3">
			{/* <div className="flex-shrink-0 overflow-hidden rounded-full w-14 h-14">
				<Image
					src={props.image}
					width="40"
					height="40"
					alt="Avatar"
					placeholder="blur"
				/>
			</div> */}
			<div>
				<div className="text-lg font-medium">- {props.name}</div>
				{/* <div className="text-gray-600 dark:text-gray-400">{props.title}</div> */}
			</div>
		</div>
	);
}

function Mark(props: { readonly children: React.ReactNode }) {
	return (
		<>
			{" "}
			<mark className="text-accent font-medium bg-accent/10 rounded-md ring-accent/10 ring-4 dark:ring-accent dark:bg-accent dark:text-accent/15">
				{props.children}
			</mark>{" "}
		</>
	);
}