Slider Hero Section

// SliderHeroSectionDemo.tsx
import React from "react";
import { SliderHeroSection } from '@/components/ui/slider-hero-section';

const SliderHeroSectionDemo = () => (
  <section>
    <div>
      <SliderHeroSection
        title="Discover cutting-edge tech and top brands at NamerStore – your one-stop destination for brand new, refurbished, and pre-owned electronics"
        showcaseOptions={[
          {
            text: 'Brand New Electronics',
            imageUrl:
              'https://images.unsplash.com/photo-1491933382434-500287f9b54b?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
          },
          {
            text: 'Refurbished iPhones',
            imageUrl:
              'https://images.unsplash.com/photo-1604671368394-2240d0b1bb6c?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
          },
          {
            text: 'Pre-owned Samsung Flagships',
            imageUrl:
              'https://images.unsplash.com/photo-1584006682522-dc17d6c0d9ac?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
          },
        ]}
        onOptionClick={option => console.log(`Clicked item: ${option.text}`)}
        onOptionHover={option => console.log(`Hovered item: ${option.text}`)}
      />
    </div>
  </section>
);

export { SliderHeroSectionDemo };