import { jsx as e, jsxs as s, Fragment as m } from "react/jsx-runtime";
import { useState as h } from "react";
import { B as n, H as p, C as i, a as l, T as r, e as t, P as u, A as C, c as b, E as N, f } from "../index-sdOMz8GW.js";
import { List as w } from "lucide-react";
import "react-router-dom";
import "react-dom";
const L = () => {
  const [o, a] = h({
    icon: /* @__PURE__ */ e(n, { className: "w-6 h-6" }),
    code: "BTC",
    name: "Bitcoin",
    price: 45e3
  }), c = [
    {
      icon: /* @__PURE__ */ e(n, { className: "w-6 h-6" }),
      code: "BTC",
      name: "Bitcoin",
      price: 45e3
    },
    {
      icon: /* @__PURE__ */ e(N, { className: "w-6 h-6" }),
      code: "ETH",
      name: "Ethereum",
      price: 3e3
    },
    {
      icon: /* @__PURE__ */ e(f, { className: "w-6 h-6" }),
      code: "USDT",
      name: "Tether",
      price: 1
    }
  ];
  return /* @__PURE__ */ s(m, { children: [
    /* @__PURE__ */ e(
      p,
      {
        title: "CoinListBox",
        description: "Dropdown listbox component for selecting cryptocurrencies with icons and names. Supports disabled state and custom styling.",
        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50", children: /* @__PURE__ */ e(w, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(i, { className: "", 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__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ s(i, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic ListBox" }),
        /* @__PURE__ */ e(
          t,
          {
            coins: c,
            selectedCoin: o,
            setSelectedCoin: a,
            className: "z-50"
          }
        )
      ] }),
      /* @__PURE__ */ s(i, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ e(
          t,
          {
            coins: c,
            selectedCoin: o,
            setSelectedCoin: a,
            disabled: !0
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      u,
      {
        componentName: "CoinListBox",
        defaultValues: {
          disabled: !1
        },
        controlOverrides: [
          {
            name: "disabled",
            type: "boolean",
            description: "Disables the listbox interaction"
          }
        ],
        includeProps: ["disabled"],
        children: (d) => /* @__PURE__ */ e("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ e(
          t,
          {
            coins: c,
            selectedCoin: o,
            setSelectedCoin: a,
            disabled: d.disabled
          }
        ) })
      }
    ),
    /* @__PURE__ */ e(C, { componentName: "CoinListBox" }),
    /* @__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(
      b,
      {
        language: "tsx",
        code: `import { CoinListBox } from '@e-burgos/tucu-ui';

const coins = [
  {
    icon: <Bitcoin />,
    code: 'BTC',
    name: 'Bitcoin',
    price: 45000,
  },
  {
    icon: <Ethereum />,
    code: 'ETH',
    name: 'Ethereum',
    price: 3000,
  },
];

const [selectedCoin, setSelectedCoin] = useState(coins[0]);

<CoinListBox
  coins={coins}
  selectedCoin={selectedCoin}
  setSelectedCoin={setSelectedCoin}
/>`
      }
    ) }) }) })
  ] });
};
export {
  L as default
};
