Carousel

"use client";

import { Carousel } from "@waveinno/ui";
import { Building2, Car, MapPin, ParkingSquare, Smartphone } from "lucide-react";

const SLIDES = [
  { name: "Gulshan Parking", meta: "412 bays · 3 levels", from: "#1f45ea", to: "#7560fd", icon: <Building2 /> },
  { name: "Banani Tower", meta: "160 bays · basement", from: "#0ea5e9", to: "#6366f1", icon: <ParkingSquare /> },
  { name: "Dhanmondi Lot", meta: "80 bays · open air", from: "#10b981", to: "#0e7490", icon: <MapPin /> },
  { name: "Uttara Sector 7", meta: "220 bays · 2 levels", from: "#f59e0b", to: "#ea580c", icon: <Car /> },
  { name: "Mirpur 10", meta: "96 bays · open air", from: "#e11d48", to: "#7c3aed", icon: <Smartphone /> },
];

function Slide({ s }: { s: (typeof SLIDES)[number] }) {
  return (
    <div className="relative flex h-44 flex-col justify-end overflow-hidden rounded-[14px] p-4 text-white" style={{ background: `linear-gradient(135deg, ${s.from}, ${s.to})` }}>
      <span className="absolute right-4 top-4 opacity-30 [&_svg]:size-14">{s.icon}</span>
      <p className="disp text-[18px] font-semibold text-white">{s.name}</p>
      <p className="text-[12.5px] text-white/80">{s.meta}</p>
    </div>
  );
}

export default function CarouselDemo() {
  return (
    <div className="space-y-10">
      <Carousel aria-label="Sites" slideClassName="basis-[85%] sm:basis-1/2 lg:basis-1/3" autoplay={4000} loop>
        {SLIDES.map((s) => (
          <Slide key={s.name} s={s} />
        ))}
      </Carousel>
      <Carousel aria-label="Sites, outside arrows" arrows="outside" indicator="bar" title={<p className="text-[14px] font-semibold text-text">Your sites</p>} slideClassName="basis-1/2 lg:basis-1/4">
        {SLIDES.map((s) => (
          <Slide key={s.name} s={s} />
        ))}
      </Carousel>
    </div>
  );
}