Retro Testimonial Carousel

import {Carousel, TestimonialCard} from "@/components/ui/retro-testimonial";
import {iTestimonial} from "@/components/ui/retro-testimonial";
type TestimonialDetails = {
	[key: string]: iTestimonial & {id: string};
};

const testimonialData = {
	ids: [
		"e60aa346-f6da-11ed-b67e-0242ac120002",
		"e60aa346-f6da-11ed-b67e-0242ac120003",
		"e60aa346-f6da-11ed-b67e-0242ac120004",
		"e60aa346-f6da-11ed-b67e-0242ac120005",
		"e60aa346-f6da-11ed-b67e-0242ac120006",
		"e60aa346-f6da-11ed-b67e-0242ac120007",
	],
	details: {
		"e60aa346-f6da-11ed-b67e-0242ac120002": {
			id: "e60aa346-f6da-11ed-b67e-0242ac120002",
			description:
				"The component library has revolutionized our development workflow. The pre-built components are not only beautiful but also highly customizable. It's saved us countless hours of development time.",
			profileImage:
				"https://cdn.21st.dev/assets/mirror/d7/d7a92cde5e050f20718f6d5c958b346e0cabdcafc0086b3c5b2c28c4a0a3987e.jpg",
			name: "Sarah Chen",
			designation: "Senior Frontend Developer",
		},
		"e60aa346-f6da-11ed-b67e-0242ac120003": {
			id: "e60aa346-f6da-11ed-b67e-0242ac120003",
			description:
				"As a startup founder, I needed a quick way to build a professional-looking product. This component library was exactly what I needed. The documentation is clear, and the components are production-ready.",
			profileImage:
				"https://cdn.21st.dev/assets/mirror/d7/d7a92cde5e050f20718f6d5c958b346e0cabdcafc0086b3c5b2c28c4a0a3987e.jpg",
			name: "Michael Rodriguez",
			designation: "Founder, TechStart",
		},
		"e60aa346-f6da-11ed-b67e-0242ac120004": {
			id: "e60aa346-f6da-11ed-b67e-0242ac120004",
			description:
				"The attention to detail in these components is impressive. From accessibility features to responsive design, everything is well thought out. It's become an essential part of our tech stack.",
			profileImage:
				"https://cdn.21st.dev/assets/mirror/d3/d3c0c88a6b46b95e1ba5bece168874b2063c8eccac9f4448f3a72b79a60a33f7.jpg",
			name: "David Kim",
			designation: "UI/UX Lead",
		},
		"e60aa346-f6da-11ed-b67e-0242ac120005": {
			id: "e60aa346-f6da-11ed-b67e-0242ac120005",
			description:
				"What sets this component library apart is its flexibility. We've been able to maintain consistency across our applications while still customizing components to match our brand identity perfectly.",
			profileImage:
				"https://cdn.21st.dev/assets/mirror/74/74c2ea4152c18408d17f866411dd8c4bbfbd6a47a3c6a21b7250a8c8dc173822.jpg",
			name: "Emily Thompson",
			designation: "Product Designer",
		},
		"e60aa346-f6da-11ed-b67e-0242ac120006": {
			id: "e60aa346-f6da-11ed-b67e-0242ac120006",
			description:
				"The performance optimization in these components is outstanding. We've seen significant improvements in our application's load times and overall user experience since implementing them.",
			profileImage:
				"https://cdn.21st.dev/assets/mirror/fa/fa3de508ebf4c18449c02f261ced600030f1a4e1ead6f8b008c66433bef4b948.jpg",
			name: "James Wilson",
			designation: "Performance Engineer",
		},
		"e60aa346-f6da-11ed-b67e-0242ac120007": {
			id: "e60aa346-f6da-11ed-b67e-0242ac120007",
			description:
				"The community support and regular updates make this component library a reliable choice for our projects. It's clear that the team behind it is committed to maintaining high quality and adding new features.",
			profileImage:
				"https://cdn.21st.dev/assets/mirror/63/63fd3f80a880af51479f7deecfa513b055f06d42f90a5fa887af9af99ab145da.jpg",
			name: "Sophia Martinez",
			designation: "Full Stack Developer",
		},
	},
};

// Example 1: Basic Carousel with Testimonials
const cards = testimonialData.ids.map((cardId: string, index: number) => {
	const details = testimonialData.details as TestimonialDetails;
	return (
		<TestimonialCard
			key={cardId}
			testimonial={details[cardId]}
			index={index}
			backgroundImage="https://cdn.21st.dev/assets/mirror/a8/a8f2656cfc75082b8f64f40e0de488fcb8d84df48ba4b1287439a1d8ef200375.jpg"
		/>
	);
});

const DemoOne = () => {
  return (
    <div className="min-h-screen">
			{/* Example 1: Basic Carousel */}
			<section className="py-12 bg-white">
				<div className="max-w-5xl mx-auto px-4">
					<Carousel items={cards} />
				</div>
			</section>

			{/* Example 2: Vintage Style */}
		</div>
  );
};


export { DemoOne };