Travel Slider Hero

import { TravelHeroSlider, HeroSlide } from "@/components/ui/travel-slider-hero"; // Adjust path as needed

// --- Sample Data ---
// Using placeholder images from Unsplash.
// In a real app, these would come from your CMS or API.

const sliderItems: HeroSlide[] = [
  {
    id: "01",
    location: "Switzerland Alps",
    title: "Saint Antönien",
    description:
      "Mount marquise stands apart. Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    href: "/discover/saint-antonien",
    imageUrl:
      "https://cdn.21st.dev/assets/mirror/a3/a326777f85d0b14a43356732b3f828bc6fb52ea5d20c4fa91516d7a67034b5e8.jpg",
    thumbnail: {
      title: "Saint Antönien",
      subtitle: "Switzerland Alps",
      imageUrl:
        "https://cdn.21st.dev/assets/mirror/59/598578f6597decdded4f6294767c047d2ab306b1e363b985b3f5d6e41bf1366c.jpg",
    },
  },
  {
    id: "02",
    location: "Japan",
    title: "Nagano Prefecture",
    description:
      "Home to the famous 'Snow Monkeys'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
    href: "/discover/nagano",
    imageUrl:
      "https://cdn.21st.dev/assets/mirror/ee/ee3988c048c0894d75c2c441c0eaf47e55ba739368f7ee02014631de4c608c30.jpg",
    thumbnail: {
      title: "Nagano",
      subtitle: "Japan",
      imageUrl:
        "https://cdn.21st.dev/assets/mirror/ee/ee3988c048c0894d75c2c441c0eaf47e55ba739368f7ee02014631de4c608c30.jpg",
    },
  },
  {
    id: "03",
    location: "Sahara Desert - Morocco",
    title: "Marrakech Merzouga",
    description:
      "Experience the vastness of the desert sands. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
    href: "/discover/marrakech",
    imageUrl:
      "https://cdn.21st.dev/assets/mirror/be/be88fe451f10ea6ce6356fb119370b43403a6cf459950e8e2a9979728af955f1.jpg",
    thumbnail: {
      title: "Marrakech",
      subtitle: "Morocco",
      imageUrl:
        "https://cdn.21st.dev/assets/mirror/be/be88fe451f10ea6ce6356fb119370b43403a6cf459950e8e2a9979728af955f1.jpg",
    },
  },
  {
    id: "04",
    location: "California, United States",
    title: "Yosemite Nat'l Park",
    description:
      "Awe-inspiring granite cliffs and waterfalls. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
    href: "/discover/yosemite",
    imageUrl:
      "https://cdn.21st.dev/assets/mirror/1f/1fff0f4d186fc6879a953a418342e25d6f23bb5864649febccf37e022a2f9fe1.jpg",
    thumbnail: {
      title: "Yosemite",
      subtitle: "United States",
      imageUrl:
        "https://cdn.21st.dev/assets/mirror/1f/1fff0f4d186fc6879a953a418342e25d6f23bb5864649febccf37e022a2f9fe1.jpg",
    },
  },
  {
    id: "05",
    location: "Tarifa, Spain",
    title: "Los Lances Beach",
    description:
      "A paradise for kitesurfing and wind sports. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.",
    href: "/discover/los-lances",
    imageUrl:
      "https://cdn.21st.dev/assets/mirror/dc/dc692b7647eb3822777ad2f82b79cfff9eb3fe3219a99a7023e2212fd30112ee.jpg",
    thumbnail: {
      title: "Los Lances",
      subtitle: "Spain",
      imageUrl:
        "https://cdn.21st.dev/assets/mirror/dc/dc692b7647eb3822777ad2f82b79cfff9eb3fe3219a99a7023e2212fd30112ee.jpg",
    },
  },
];

/**
 * A demo page to showcase the TravelHeroSlider.
 */
export default function TravelHeroSliderDemo() {
  return (
    <main>
      <TravelHeroSlider items={sliderItems} />
      {/* You can add the rest of your page content below */}
      <div className="h-screen bg-background p-12">
        <h2 className="text-3xl font-bold">Page Content Starts Here</h2>
        <p className="text-muted-foreground mt-4">
          The hero slider above is a self-contained component.
        </p>
      </div>
    </main>
  );
}