import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
import { al as d, H as m, C as s, a as n, T as r, x as i, am as h, y as p, c as u } from "../index-sdOMz8GW.js";
import { BellRing as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => {
  const { addToast: o } = d();
  return /* @__PURE__ */ t(c, { children: [
    /* @__PURE__ */ e(
      m,
      {
        title: "Toast",
        description: `A toast notification system for displaying temporary messages with
          multiple variants and auto-dismiss functionality.`,
        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-red-600 to-orange-500 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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ t(s, { className: "p-4", children: [
          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Success Toast" }),
          /* @__PURE__ */ e(
            i,
            {
              onClick: () => o({
                id: Date.now().toString(),
                title: "Success!",
                message: "Operation completed successfully.",
                variant: "success"
              }),
              children: "Show Success Toast"
            }
          )
        ] }),
        /* @__PURE__ */ t(s, { className: "p-4", children: [
          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Error Toast" }),
          /* @__PURE__ */ e(
            i,
            {
              onClick: () => o({
                id: Date.now().toString(),
                title: "Error!",
                message: "Something went wrong.",
                variant: "destructive"
              }),
              children: "Show Error Toast"
            }
          )
        ] }),
        /* @__PURE__ */ t(s, { className: "p-4", children: [
          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Warning Toast" }),
          /* @__PURE__ */ e(
            i,
            {
              onClick: () => o({
                id: Date.now().toString(),
                title: "Warning!",
                message: "Please review this information.",
                variant: "warning"
              }),
              children: "Show Warning Toast"
            }
          )
        ] }),
        /* @__PURE__ */ t(s, { className: "p-4", children: [
          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Info Toast" }),
          /* @__PURE__ */ e(
            i,
            {
              onClick: () => o({
                id: Date.now().toString(),
                title: "Info",
                message: "Here is some information.",
                variant: "info"
              }),
              children: "Show Info Toast"
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ e(h, {})
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(p, { columns: [
      {
        key: "prop",
        label: "Prop",
        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(a) })
      },
      {
        key: "type",
        label: "Type",
        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(a) })
      },
      {
        key: "default",
        label: "Default",
        render: (a) => {
          const l = String(a);
          return l === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: l });
        }
      },
      {
        key: "description",
        label: "Description"
      }
    ], data: [
      {
        prop: "Toast Component",
        type: "React.FC",
        default: "-",
        description: "The Toast component renders automatically from the toast store"
      },
      {
        prop: "useToastStore",
        type: "Hook",
        default: "-",
        description: "Hook to manage toast notifications"
      }
    ] }) }) }) }),
    /* @__PURE__ */ e(s, { 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(
      u,
      {
        language: "tsx",
        code: `import { Toast, useToastStore } from '@e-burgos/tucu-ui';

function MyComponent() {
  const { addToast } = useToastStore();

  const showSuccess = () => {
    addToast({
      id: Date.now().toString(),
      title: 'Success!',
      message: 'Operation completed successfully.',
      variant: 'success',
    });
  };

  const showError = () => {
    addToast({
      id: Date.now().toString(),
      title: 'Error!',
      message: 'Something went wrong.',
      variant: 'destructive',
    });
  };

  return (
    <>
      <button onClick={showSuccess}>Show Success</button>
      <button onClick={showError}>Show Error</button>
      <Toast />
    </>
  );
}

// Toast variants
addToast({ id: Date.now().toString(), variant: 'success', title: 'Success', message: '...' });
addToast({ id: Date.now().toString(), variant: 'destructive', title: 'Error', message: '...' });
addToast({ id: Date.now().toString(), variant: 'warning', title: 'Warning', message: '...' });
addToast({ id: Date.now().toString(), variant: 'info', title: 'Info', message: '...' });`
      }
    ) }) }) })
  ] });
};
export {
  x as default
};
