"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),t=require("../index-DEZRGktf.js"),c=require("lucide-react");require("react-router-dom");require("react-dom");const m=()=>{const[a,n]=s.useState(!1),[l,o]=s.useState(!1),[i,r]=s.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Modal",description:`A modal dialog component for displaying content in an overlay with
          customizable buttons and close functionality.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(c.Maximize2,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic Modal"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open Modal"}),e.jsx(t.Modal,{isOpen:a,setIsOpen:n,text:{title:"Modal Title",content:"This is the modal content.",button:"Confirm"}})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Modal with Custom Content"}),e.jsx(t.Button,{onClick:()=>o(!0),children:"Open Custom Modal"}),e.jsx(t.Modal,{isOpen:l,setIsOpen:o,text:{title:"Custom Modal"},children:e.jsx(t.Typography,{tag:"p",children:"Custom content goes here"})})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"Modal",defaultValues:{isOpen:i,setIsOpen:r,closeable:!0,hideButtons:!1},excludeProps:["setIsOpen","onBack","onClose","onSubmit"],children:d=>e.jsx(t.Modal,{...d,text:{title:"Modal Preview",content:"This is a preview of the modal component."},children:e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Modal body content"})})}),e.jsx(t.AutoPropsTable,{componentName:"Modal"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { Modal, Button } from '@e-burgos/tucu-ui';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        text={{
          title: 'Modal Title',
          content: 'This is the modal content.',
          button: 'Confirm',
        }}
      />
    </>
  );
}

// With custom content
<Modal isOpen={isOpen} setIsOpen={setIsOpen} text={{ title: 'Custom Modal' }}>
  <div>Custom content here</div>
</Modal>

// Non-closeable
<Modal isOpen={isOpen} setIsOpen={setIsOpen} closeable={false} />`})})})})]})};exports.default=m;
