import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
import { H as i, C as l, a as n, T as r, y as s, P as d, A as u, c as h } from "../index-sdOMz8GW.js";
import { Table2 as b } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const B = () => {
  const t = [
    { key: "name", label: "Name" },
    { key: "age", label: "Age" },
    { key: "city", label: "City" }
  ], o = [
    { name: "John Doe", age: 30, city: "New York" },
    { name: "Jane Smith", age: 25, city: "Los Angeles" },
    { name: "Bob Johnson", age: 35, city: "Chicago" }
  ];
  return /* @__PURE__ */ a(m, { children: [
    /* @__PURE__ */ e(
      i,
      {
        title: "BasicTable",
        description: `A flexible and customizable table component with support for custom
          rendering, styling, and interactions.`,
        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-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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(l, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Table" }),
        /* @__PURE__ */ e(s, { columns: t, data: o })
      ] }),
      /* @__PURE__ */ a(l, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Striped Table" }),
        /* @__PURE__ */ e(
          s,
          {
            columns: t,
            data: o,
            striped: !0
          }
        )
      ] }),
      /* @__PURE__ */ a(l, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Without Border" }),
        /* @__PURE__ */ e(
          s,
          {
            columns: t,
            data: o,
            border: !1
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      d,
      {
        componentName: "BasicTable",
        title: "BasicTable Playground",
        defaultValues: {
          border: !1,
          hoverable: !0,
          rounded: !0,
          striped: !1,
          showHeader: !0,
          resizable: !1
        },
        excludeProps: ["columns", "data", "className", "containerClassName", "headerClassName", "tableClassName", "rowClassName", "maxRows"],
        children: (c) => /* @__PURE__ */ e(
          s,
          {
            ...c,
            columns: [
              { key: "name", label: "Name" },
              { key: "role", label: "Role" },
              { key: "status", label: "Status" }
            ],
            data: [
              { name: "Alice", role: "Developer", status: "Active" },
              { name: "Bob", role: "Designer", status: "Inactive" },
              { name: "Carol", role: "Manager", status: "Active" }
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ e(u, { componentName: "BasicTable" }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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 { BasicTable } from '@e-burgos/tucu-ui';

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'age', label: 'Age' },
  { key: 'city', label: 'City' },
];

const data = [
  { name: 'John Doe', age: 30, city: 'New York' },
  { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
  { name: 'Bob Johnson', age: 35, city: 'Chicago' },
];

// Basic usage
<BasicTable columns={columns} data={data} />

// With custom render
const columnsWithRender = [
  {
    key: 'name',
    label: 'Name',
    render: (value) => <strong>{value}</strong>,
  },
  { key: 'age', label: 'Age' },
];

// Striped table
<BasicTable columns={columns} data={data} striped />

// Without border
<BasicTable columns={columns} data={data} border={false} />

// Without hover effect
<BasicTable columns={columns} data={data} hoverable={false} />`
      }
    ) }) }) })
  ] });
};
export {
  B as default
};
