const customTheme = {
 **carousel: {**
 "root": {
 "base": "relative h-full w-full",
 "leftControl": "absolute left-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none",
 "rightControl": "absolute right-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none"
 },
 "indicators": {
 "active": {
 "off": "bg-bright-red/50 hover:bg-bright-red dark:bg-gray-800/50 dark:hover:bg-gray-800",
 "on": "bg-bright-red dark:bg-gray-800"
 },
 "base": "h-3 w-3 rounded-full",
 "wrapper": "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3"
 },
 "item": {
 "base": "absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2",
 "wrapper": {
 "off": "w-full flex-shrink-0 transform cursor-default snap-center",
 "on": "w-full flex-shrink-0 transform cursor-grab snap-center"
 }
 },
 "control": {
 "base": "inline-flex h-8 w-8 items-center justify-center rounded-full bg-bright-red/30 group-hover:bg-bright-red/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-bright-red dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10",
 "icon": "h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6"
 },
 "scrollContainer": {
 "base": "flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg",
 "snap": "snap-x"
 }
 }
}

import { Carousel } from "flowbite-react";
import { Flowbite } from "flowbite-react";
import data from '../data.json'
import TestimonialItem from './TestimonialItem'
const testimonialsData = data.testimonials
const customTheme = {
 "root": {
 "base": "relative h-full w-full",
 "leftControl": "absolute left-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none bg-bright-red",
 "rightControl": "absolute right-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none"
 },
 "indicators": {
 "active": {
 "off": "bg-bright-red/50 hover:bg-bright-red dark:bg-gray-800/50 dark:hover:bg-gray-800",
 "on": "bg-bright-red dark:bg-gray-800"
 },
 "base": "h-3 w-3 rounded-full",
 "wrapper": "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3"
 },
 "item": {
 "base": "absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2",
 "wrapper": {
 "off": "w-full flex-shrink-0 transform cursor-default snap-center",
 "on": "w-full flex-shrink-0 transform cursor-grab snap-center"
 }
 },
 "control": {
 "base": "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10",
 "icon": "h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6"
 },
 "scrollContainer": {
 "base": "flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg bg-bright-red",
 "snap": "snap-x"
 }
};
export default function TestimonialCarousel() {
 return (
 <div className="pt-10">
 <Flowbite theme={{ theme: customTheme }}>
 <Carousel slideInterval={5000} className="py-10">
 {testimonialsData.map((item) => (
 <TestimonialItem id={item.name} name={item.name} text={item.text} image={item.image} />
 ))}
 </Carousel>
 </Flowbite>
 </div>
 );
}