import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
import { H as n, C as i, a as l, T as t, V as s, P as o, A as m, c as h } from "../index-sdOMz8GW.js";
import { Layers as p, Zap as u, Palette as C, Users as w, Smartphone as g, Shield as N, BookOpen as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => {
  const r = [
    {
      title: "Performance",
      description: "Blazing fast performance with optimized rendering and minimal bundle size",
      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8" })
    },
    {
      title: "Customizable",
      description: "Highly customizable with extensive theming options and variants",
      icon: /* @__PURE__ */ e(C, { className: "w-8 h-8" })
    },
    {
      title: "Accessible",
      description: "Built with accessibility in mind, WCAG 2.1 compliant",
      icon: /* @__PURE__ */ e(w, { className: "w-8 h-8" })
    },
    {
      title: "Responsive",
      description: "Mobile-first design that works seamlessly across all devices",
      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8" })
    },
    {
      title: "Type Safe",
      description: "Full TypeScript support with comprehensive type definitions",
      icon: /* @__PURE__ */ e(N, { className: "w-8 h-8" })
    },
    {
      title: "Documentation",
      description: "Extensive documentation with examples and best practices",
      icon: /* @__PURE__ */ e(f, { className: "w-8 h-8" })
    }
  ];
  return /* @__PURE__ */ a(d, { children: [
    /* @__PURE__ */ e(
      n,
      {
        title: "CarouselCards",
        description: `A carousel component specifically designed for displaying cards with
          customizable sizes and variants.`,
        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-rose-500 to-pink-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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Carousel Cards" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(s, { cardClassName: "min-h-[250px]", cards: r }) })
      ] }),
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Navigation and Pagination" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(s, { cards: r, showNavigation: !0, showPagination: !0 }) })
      ] }),
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Elevated Variant - Medium Size" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
          s,
          {
            cards: r,
            variant: "elevated",
            cardSize: "md",
            showNavigation: !0
          }
        ) })
      ] }),
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Outlined Variant - Large Size" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
          s,
          {
            cards: r,
            variant: "outlined",
            cardSize: "lg",
            showPagination: !0
          }
        ) })
      ] }),
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Filled Variant - Small Size" }),
        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
          s,
          {
            cards: r,
            variant: "filled",
            cardSize: "sm",
            showNavigation: !0,
            showPagination: !0
          }
        ) })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      o,
      {
        componentName: "CarouselCards",
        title: "CarouselCards Playground",
        defaultValues: {
          variant: "default",
          cardSize: "md",
          showCardTitles: !0,
          showNavigation: !0,
          showPagination: !0,
          loop: !0,
          grabCursor: !0,
          direction: "horizontal"
        },
        excludeProps: ["cards", "onSlideChange", "onSwiper", "breakpoints", "autoplay", "className", "slideClassName", "cardClassName", "aria-label", "effect", "paginationType", "centeredSlides", "freeMode", "mousewheel", "slidesPerView", "spaceBetween"],
        children: (c) => /* @__PURE__ */ e(
          s,
          {
            ...c,
            cards: [
              { title: "Card 1", description: "Description 1", image: "" },
              { title: "Card 2", description: "Description 2", image: "" },
              { title: "Card 3", description: "Description 3", image: "" }
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ e(m, { componentName: "CarouselCards" }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { 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 { CarouselCards, LucideIcons } from '@e-burgos/tucu-ui';

const cards = [
  {
    title: 'Performance',
    description: 'Blazing fast performance with optimized rendering',
    icon: <LucideIcons.Zap className="w-8 h-8" />,
  },
  {
    title: 'Customizable',
    description: 'Highly customizable with extensive theming options',
    icon: <LucideIcons.Palette className="w-8 h-8" />,
  },
  {
    title: 'Accessible',
    description: 'Built with accessibility in mind, WCAG 2.1 compliant',
    icon: <LucideIcons.Users className="w-8 h-8" />,
  },
  // ... more cards
];

// Basic usage
<CarouselCards cards={cards} />

// With navigation and pagination
<CarouselCards cards={cards} showNavigation showPagination />

// Different variants
<CarouselCards cards={cards} variant="elevated" cardSize="md" />
<CarouselCards cards={cards} variant="outlined" cardSize="lg" />
<CarouselCards cards={cards} variant="filled" cardSize="sm" />

// Different sizes
<CarouselCards cards={cards} cardSize="sm" />
<CarouselCards cards={cards} cardSize="md" />
<CarouselCards cards={cards} cardSize="lg" />
<CarouselCards cards={cards} cardSize="xl" />`
      }
    ) }) }) })
  ] });
};
export {
  x as default
};
