import { jsxs as i, Fragment as d, jsx as e } from "react/jsx-runtime";
import { H as c, C as r, a as o, J as t, T as a, K as l, x as n, P as h, A as m, c as p } from "../index-sdOMz8GW.js";
import { CreditCard as g, Users as C, Settings as u, Bell as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const k = () => /* @__PURE__ */ i(d, { children: [
  /* @__PURE__ */ e(
    c,
    {
      title: "Card",
      description: `A flexible card component with optional header, icon, footer, actions,
          and clickable behavior.`,
      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-violet-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "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__ */ e(
      t,
      {
        title: "Basic Card",
        description: "A simple card with title and description",
        icon: /* @__PURE__ */ e(C, { className: "h-5 w-5" }),
        children: /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "This is the card body content. You can place any content here."
          }
        )
      }
    ),
    /* @__PURE__ */ e(
      t,
      {
        title: "With Actions",
        description: "Card with action buttons in the header",
        icon: /* @__PURE__ */ e(u, { className: "h-5 w-5" }),
        actions: /* @__PURE__ */ e(l, { color: "success", size: "small", children: "Active" }),
        children: /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "The actions slot renders elements on the right side of the header."
          }
        )
      }
    ),
    /* @__PURE__ */ e(
      t,
      {
        title: "With Footer",
        description: "Card with a footer section",
        icon: /* @__PURE__ */ e(f, { className: "h-5 w-5" }),
        footer: /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ e(a, { tag: "span", className: "text-xs text-gray-500", children: "Last updated 2 hours ago" }),
          /* @__PURE__ */ e(n, { variant: "ghost", size: "mini", children: "View Details" })
        ] }),
        children: /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Footer content appears at the bottom with a top border separator."
          }
        )
      }
    ),
    /* @__PURE__ */ e(
      t,
      {
        title: "Clickable Card",
        description: "Click anywhere on this card",
        onClick: () => alert("Card clicked!"),
        children: /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Clickable cards show a hover effect on the border."
          }
        )
      }
    )
  ] }) }) }) }),
  /* @__PURE__ */ e(
    h,
    {
      componentName: "Card",
      title: "Card Playground",
      defaultValues: {
        title: "Card Title",
        description: "This is a card description with relevant content."
      },
      excludeProps: ["onClick", "icon", "header", "footer", "actions", "className"],
      children: (s) => /* @__PURE__ */ e(t, { ...s })
    }
  ),
  /* @__PURE__ */ e(m, { componentName: "Card" }),
  /* @__PURE__ */ e(r, { 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(
    p,
    {
      language: "tsx",
      code: `import { Card, Badge, Button } from '@e-burgos/tucu-ui';
import { Users } from 'lucide-react';

// Basic
<Card
  title="Team Members"
  description="Manage your team"
  icon={<Users className="h-5 w-5" />}
>
  <p>Card body content</p>
</Card>

// With actions and footer
<Card
  title="Notifications"
  actions={<Badge color="info">3 new</Badge>}
  footer={<Button variant="ghost" size="mini">View All</Button>}
>
  <p>You have 3 unread notifications</p>
</Card>

// Clickable
<Card title="Dashboard" onClick={() => navigate('/dashboard')}>
  <p>Click to navigate</p>
</Card>`
    }
  ) }) }) })
] });
export {
  k as default
};
