Accordion With Picture

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://images.unsplash.com/photo-1553729459-efe14ef6055d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
    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://images.unsplash.com/photo-1541532713592-79a0317b6b77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80",
    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://images.unsplash.com/photo-1578450671530-5b6a7c9f32a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
    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://images.unsplash.com/photo-1543286386-713bdd548da4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
    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>
  );
}