cidwa-components/src/app/(components)/button/page.tsx

'use client';

import IndiceContenido from '@/components/docs/content-index';
import VistaComponente from '@/components/docs/vista-componente';
import Button from '@/components/button';

export default function Page() {
  return (
    <>
      <IndiceContenido
        items={[
          { id: 'button-basico', label: 'Botón básico' },
          { id: 'button-icono', label: 'Botón con ícono' },
          { id: 'button-props', label: 'Props del componente' },
        ]}
      />

      <div className='my-5'>
        <h1 className='mb-4 display-5'>
          🧩 Componente: <code>Button</code>
        </h1>

        <p className='mb-4 text-muted'>
          El componente <code>&lt;Button /&gt;</code> permite crear botones con
          estilos de Bootstrap, variantes personalizables, íconos opcionales y
          soporte completo para props de HTML estándar.
        </p>

        <hr className='my-5' />

        <VistaComponente
          id='button-basico'
          title='🚀 Botón básico'
          description='Un botón con texto y variante primaria (por defecto).'
          code={`<Button onClick={() => alert("¡Hola mundo!")}>
  Clic aquí
</Button>`}
        >
          <Button onClick={() => alert('¡Hola mundo!')} className='mb-3'>
            Clic aquí
          </Button>
        </VistaComponente>

        <VistaComponente
          id='button-icono'
          title='Botón con ícono'
          description='Puedes agregar un ícono Bootstrap usando el nombre del ícono o pasar un componente.'
          code={`<Button icon="check-circle" variant="success">
  Guardar
</Button>`}
        >
          <Button icon='check-circle' variant='success' className='mb-3'>
            Guardar
          </Button>
        </VistaComponente>

        <div className='mb-5'>
          <p className='text-muted'>
            Puedes consultar la lista completa de íconos disponibles en:{' '}
            <a
              href='https://icons.getbootstrap.com/'
              target='_blank'
              rel='noopener noreferrer'
            >
              https://icons.getbootstrap.com/
            </a>
          </p>
        </div>

        <VistaComponente
          id='button-size'
          title='Botón con tamaño'
          description='Puedes cambiar el tamaño del botón usando las clases de Bootstrap.'
          code={`<Button icon="check-circle" variant="success" size="lg">
  Guardar
</Button>`}
        >
          <div className='d-flex align-items-center gap-3'>
            <div>
              <Button
                icon='facebook'
                variant='dorado'
                className='mb-3'
                size='lg'
              >
                Boton grande
              </Button>
            </div>
            <div>
              <Button icon='camera' variant='azul' className='mb-3'>
                Boton normal
              </Button>
            </div>
            <div>
              <Button
                icon='check-circle'
                variant='success'
                className='mb-3'
                size='sm'
              >
                Boton pequeño
              </Button>
            </div>
          </div>
        </VistaComponente>

        {/* PROPS */}
        <section className='mb-5' id='button-props'>
          <h2 className='h5 mb-3'>⚙️ Props del componente</h2>
          <table className='table table-bordered table-striped align-middle'>
            <thead>
              <tr>
                <th scope='col'>Prop</th>
                <th scope='col'>Tipo</th>
                <th scope='col'>Descripción</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>variant?</code>
                </td>
                <td>
                  <code>string</code>
                </td>
                <td>
                  Clase base del botón. Ej: <code>&quot;primary&quot;</code>,{' '}
                  <code>&quot;danger&quot;</code>, etc.
                </td>
              </tr>
              <tr>
                <td>
                  <code>outline?</code>
                </td>
                <td>
                  <code>boolean</code>
                </td>
                <td>
                  Si el botón debe usar el estilo <code>outline</code>.
                </td>
              </tr>
              <tr>
                <td>
                  <code>icon?</code>
                </td>
                <td>
                  <code>string | ReactNode</code>
                </td>
                <td>
                  Ícono Bootstrap por nombre o un componente React
                  personalizado.
                </td>
              </tr>
              <tr>
                <td>
                  <code>size?</code>
                </td>
                <td>
                  <code>&quot;sm&quot; | &quot;lg&quot;</code>
                </td>
                <td>Tamaño del botón, usando clases de Bootstrap.</td>
              </tr>
              <tr>
                <td>
                  <code>className?</code>
                </td>
                <td>
                  <code>string</code>
                </td>
                <td>Clases adicionales para el botón.</td>
              </tr>
              <tr>
                <td>
                  <code>type?</code>
                </td>
                <td>
                  <code>
                    &quot;button&quot; | &quot;submit&quot; | &quot;reset&quot;
                  </code>
                </td>
                <td>Tipo del botón HTML.</td>
              </tr>
              <tr>
                <td>
                  <code>disabled?</code>
                </td>
                <td>
                  <code>boolean</code>
                </td>
                <td>
                  Desactiva el botón cuando es <code>true</code>.
                </td>
              </tr>
              <tr>
                <td>
                  <code>children</code>
                </td>
                <td>
                  <code>ReactNode</code>
                </td>
                <td>Contenido del botón (texto o nodos).</td>
              </tr>
              <tr>
                <td>
                  <code>...rest</code>
                </td>
                <td>
                  <code>ButtonHTMLAttributes&lt;HTMLButtonElement&gt;</code>
                </td>
                <td>
                  Soporta todas las props válidas de <code>&lt;button&gt;</code>{' '}
                  nativo.
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </div>
    </>
  );
}