import React from "react";
import { VerticalAccordion, type AccordionItem } from "@/components/ui/accordion-with-picture";
import { BarChart3, Bell, DollarSign, Play } from "lucide-react";
// Demo data
const demoItems: AccordionItem[] = [
{
id: "earn",
title: "Earn more",
icon: DollarSign,
image: "https://cdn.21st.dev/assets/mirror/db/db1ca69d7807c7e48ccac41e71117b2ec040bdbd1746eeae2e667ca513dfda0f.jpg",
description: "Maximize your earning potential with our comprehensive suite of financial tools and investment strategies designed for long-term growth.",
},
{
id: "play",
title: "Play more",
icon: Play,
image: "https://cdn.21st.dev/assets/mirror/7f/7f9d29ac5d4b2571ccf8109beba07e56c3a767212606c19c27cf143378c22f62.jpg",
description: "Discover new entertainment possibilities and creative outlets that bring joy and fulfillment to your everyday life.",
},
{
id: "track",
title: "Keep track",
icon: Bell,
image: "https://cdn.21st.dev/assets/mirror/ad/ada13d4c2b684bb4f4e19158d041e41ad7aab2d38882e75435fc95c2bb437bf7.jpg",
description: "Stay organized and never miss important updates with our intelligent notification system and progress tracking features.",
},
{
id: "grow",
title: "Grow faster",
icon: BarChart3,
image: "https://cdn.21st.dev/assets/mirror/dd/dda0709d5497fa3c49ba281ff127d3e4b73f2fc3ca249c04baf75f0153b96e26.jpg",
description: "Accelerate your personal and professional development with data-driven insights and personalized growth recommendations.",
},
];
export default function VerticalAccordionDemo() {
return (
<div className="bg-background">
<VerticalAccordion
items={demoItems}
defaultOpen="earn"
panelHeight="500px"
/>
</div>
);
}
