import { jsxs as l, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as c, C as a, a as o, T as s, U as i, P as m, A as u, c as h } from "../index-sdOMz8GW.js";
import { GalleryHorizontal as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const b = () => {
  const r = [
    /* @__PURE__ */ e(
      "div",
      {
        className: "h-64 w-full bg-gradient-to-br from-brand to-sky-500 rounded-lg flex items-center justify-center text-white text-2xl",
        children: "Slide 1"
      },
      "1"
    ),
    /* @__PURE__ */ e(
      "div",
      {
        className: "h-64 w-full bg-gradient-to-br from-brand to-green-500 rounded-lg flex items-center justify-center text-white text-2xl",
        children: "Slide 2"
      },
      "2"
    ),
    /* @__PURE__ */ e(
      "div",
      {
        className: "h-64 w-full bg-gradient-to-br from-brand to-purple-500 rounded-lg flex items-center justify-center text-white text-2xl",
        children: "Slide 3"
      },
      "3"
    )
  ];
  return /* @__PURE__ */ l(n, { children: [
    /* @__PURE__ */ e(
      c,
      {
        title: "Carousel",
        description: `A powerful carousel component built on Swiper.js with support for
          navigation, pagination, autoplay, and various effects.`,
        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-pink-500 to-rose-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "space-y-4", children: [
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Basic Carousel" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(i, { children: r }) })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Navigation" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(i, { showNavigation: !0, children: r }) })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Pagination" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(i, { showPagination: !0, children: r }) })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Multiple Slides" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(i, { slidesPerView: 2, spaceBetween: 20, children: r }) })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      m,
      {
        componentName: "Carousel",
        title: "Carousel Playground",
        defaultValues: {
          direction: "horizontal",
          effect: "slide",
          loop: !0,
          showNavigation: !0,
          showPagination: !0,
          paginationType: "bullets",
          grabCursor: !0,
          centeredSlides: !1,
          freeMode: !1,
          mousewheel: !1,
          slidesPerView: 1,
          spaceBetween: 16
        },
        excludeProps: ["onSlideChange", "onSwiper", "breakpoints", "autoplay", "className", "slideClassName", "aria-label"],
        children: (d) => /* @__PURE__ */ e(i, { ...d, children: [1, 2, 3, 4].map((t) => /* @__PURE__ */ e("div", { className: "h-40 rounded-lg bg-brand/20 flex items-center justify-center", children: /* @__PURE__ */ l(s, { tag: "h4", children: [
          "Slide ",
          t
        ] }) }, t)) })
      }
    ),
    /* @__PURE__ */ e(u, { componentName: "Carousel" }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      h,
      {
        language: "tsx",
        code: `import { Carousel } from '@e-burgos/tucu-ui';

const slides = [
  <div key="1">Slide 1</div>,
  <div key="2">Slide 2</div>,
  <div key="3">Slide 3</div>,
];

// Basic usage
<Carousel>{slides}</Carousel>

// With navigation
<Carousel showNavigation>{slides}</Carousel>

// With pagination
<Carousel showPagination>{slides}</Carousel>

// Multiple slides per view
<Carousel slidesPerView={2} spaceBetween={20}>
  {slides}
</Carousel>

// With autoplay
<Carousel autoplay={{ delay: 3000 }}>{slides}</Carousel>`
      }
    ) }) }) })
  ] });
};
export {
  b as default
};
