import { jsxs as i, Fragment as m, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as h, C as o, a, T as n, ab as s, P as p, A as g, c as C } from "../index-sdOMz8GW.js";
import { List as N, Activity as u, Edit as f, Trash as b, Share as w } from "lucide-react";
import "react-router-dom";
import "react-dom";
const E = () => {
  const [l, r] = d(!1), t = [
    {
      id: "1",
      label: "Edit",
      icon: /* @__PURE__ */ e(f, { className: "w-4 h-4" }),
      onClick: () => console.log("Edit clicked")
    },
    {
      id: "2",
      label: "Delete",
      icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" }),
      onClick: () => console.log("Delete clicked")
    },
    {
      id: "3",
      label: "Share",
      icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
      onClick: () => console.log("Share clicked")
    }
  ];
  return /* @__PURE__ */ i(m, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "ListContainer",
        description: `A dropdown container component for displaying lists of items with
          customizable trigger and positioning.`,
        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-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { 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(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ i(o, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Hover Trigger" }),
        /* @__PURE__ */ e(s, { items: t, trigger: "hover" })
      ] }),
      /* @__PURE__ */ i(o, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Click Trigger" }),
        /* @__PURE__ */ e(
          s,
          {
            items: t,
            trigger: "click",
            isOpen: l,
            onOpenChange: r
          }
        )
      ] }),
      /* @__PURE__ */ i(o, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Custom Icon" }),
        /* @__PURE__ */ e(
          s,
          {
            items: t,
            triggerIcon: /* @__PURE__ */ e(u, { className: "w-4! h-4!" })
          }
        )
      ] }),
      /* @__PURE__ */ i(o, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Different Positions" }),
        /* @__PURE__ */ i("div", { className: "flex gap-4", children: [
          /* @__PURE__ */ e(s, { items: t, position: "top" }),
          /* @__PURE__ */ e(s, { items: t, position: "right" }),
          /* @__PURE__ */ e(s, { items: t, position: "left" })
        ] })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      p,
      {
        componentName: "ListContainer",
        title: "ListContainer Playground",
        defaultValues: {
          label: "Select an option",
          position: "bottom",
          align: "start",
          trigger: "click",
          isOpen: !0,
          keepOpen: !1
        },
        excludeProps: [
          "items",
          "onOpenChange",
          "triggerIcon",
          "className",
          "dropdownClassName"
        ],
        children: (c) => /* @__PURE__ */ e(
          s,
          {
            ...c,
            items: [
              {
                label: "Option 1",
                onClick: () => {
                }
              },
              {
                label: "Option 2",
                onClick: () => {
                }
              },
              {
                label: "Option 3",
                onClick: () => {
                }
              }
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ e(g, { componentName: "ListContainer" }),
    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      C,
      {
        language: "tsx",
        code: `import { ListContainer, ListItem, LucideIcons } from '@e-burgos/tucu-ui';

const items = [
  {
    id: '1',
    label: 'Edit',
    icon: <LucideIcons.Edit className="w-4 h-4" />,
    onClick: () => handleEdit(),
  },
  {
    id: '2',
    label: 'Delete',
    icon: <LucideIcons.Trash className="w-4 h-4" />,
    onClick: () => handleDelete(),
  },
];

// Hover trigger
<ListContainer items={items} trigger="hover" />

// Click trigger
<ListContainer
  items={items}
  trigger="click"
  isOpen={isOpen}
  onOpenChange={setIsOpen}
/>

// With custom icon
<ListContainer
  items={items}
  triggerIcon={<LucideIcons.MoreVertical className="w-5 h-5" />}
/>

// Different positions
<ListContainer items={items} position="top" />
<ListContainer items={items} position="right" />
<ListContainer items={items} position="bottom" />`
      }
    ) }) }) })
  ] });
};
export {
  E as default
};
