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

'use client';

import IndiceContenido from '@/components/docs/content-index';
import Select from '@/components/select';
import VistaComponente from '@/components/docs/vista-componente';
import {
  countrySelectSnippet,
  languageSelectSnippet,
} from '@/snippets/select/select';
import { useState } from 'react';

export default function Page() {
  const [pais, setPais] = useState('');

  const opcionesPais = [
    { value: 'mx', label: 'México' },
    { value: 'us', label: 'Estados Unidos' },
    { value: 'ca', label: 'Canadá' },
  ];

  return (
    <>
      <IndiceContenido
        items={[
          { id: 'select-basico', label: 'Select básico' },
          { id: 'select-estilos', label: 'Personalización de estilos' },
          { id: 'select-props', label: 'Props del componente' },
        ]}
      />
      <div className='my-5'>
        <h1 className='mb-4 display-5'>
          Componente: <code>Select</code>
        </h1>

        <p className='mb-4 text-muted'>
          El componente <code>&lt;Select /&gt;</code> permite mostrar una lista
          desplegable con opciones personalizables, soporta etiquetas, estilos
          por clase, y es compatible con formularios.
        </p>

        <hr className='my-5' />

        <VistaComponente
          title='Select básico'
          description='Un select controlado con opciones simples y un placeholder deshabilitado.'
          code={countrySelectSnippet}
          id='select-basico'
        >
          <Select
            label='País'
            name='pais'
            placeholder='Selecciona un país'
            options={opcionesPais}
            value={pais}
            onChange={(e) => setPais(e.target.value)}
          />
        </VistaComponente>

        <VistaComponente
          title='Personalización de estilos'
          description='Puedes aplicar clases personalizadas al contenedor, etiqueta o al select.'
          code={languageSelectSnippet}
          id='select-estilos'
        >
          <Select
            label='Idioma'
            name='idioma'
            placeholder='Selecciona un idioma'
            options={[
              { value: 'es', label: 'Español' },
              { value: 'en', label: 'Inglés' },
              { value: 'fr', label: 'Francés' },
            ]}
            className={{
              container: 'mb-4',
              label: 'text-primary fw-bold',
              input: 'border border-success',
            }}
          />
        </VistaComponente>

        <section className='mb-5'>
          <h2 className='h5'>Props del componente</h2>
          <ul>
            <li>
              <code>label: string</code> – Etiqueta visible del campo.
            </li>
            <li>
              <code>
                options: &#123; value: string &#124; number; label: string
                &#125;[]
              </code>{' '}
              – Opciones a mostrar.
            </li>
            <li>
              <code>placeholder?: string</code> – Texto inicial deshabilitado.
            </li>
            <li>
              <code>name?: string</code> – Nombre del campo.
            </li>
            <li>
              <code>id?: string</code> – ID del campo (se genera si no se
              proporciona).
            </li>
            <li>
              <code>defaultValue?: string | number</code> – Valor por defecto
              (modo no controlado).
            </li>
            <li>
              <code>value?: string | number</code> – Valor actual del select
              (modo controlado).
            </li>
            <li>
              <code>className?: &#123; container?, label?, input? &#125;</code>{' '}
              – Clases personalizadas.
            </li>
            <li>
              <code>...rest</code> – Cualquier otra prop válida de{' '}
              <code>&lt;select&gt;</code>.
            </li>
          </ul>
        </section>
      </div>
    </>
  );
}