import { useState } from 'react';
import { DesplegablePerfil } from './DesplegablePerfil';

export default {
  title: 'Layout/DesplegablePerfil',
  component: DesplegablePerfil,
  tags: ['autodocs'],
  argTypes: {
    isOpen: {
      control: 'boolean',
      description: 'Controla si el desplegable está abierto o cerrado',
    },
    onClose: {
      action: 'closed',
      description: 'Callback cuando se cierra el desplegable',
    },
    onProfileClick: {
      action: 'profile clicked',
      description: 'Callback cuando se hace click en "Perfil"',
    },
    onSettingsClick: {
      action: 'settings clicked',
      description: 'Callback cuando se hace click en "Configuraciones"',
    },
    onLogoutClick: {
      action: 'logout clicked',
      description: 'Callback cuando se hace click en "Cerrar sesión"',
    },
  },
};

export const Default = {
  args: {
    isOpen: true,
    onClose: () => console.log('Desplegable cerrado'),
    onProfileClick: () => console.log('Perfil clickeado'),
    onSettingsClick: () => console.log('Configuraciones clickeadas'),
    onLogoutClick: () => console.log('Cerrar sesión clickeado'),
  },
};

export const Interactive = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <div className="relative p-8">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="px-4 py-2 bg-blue-500 text-white rounded-lg"
        >
          {isOpen ? 'Cerrar desplegable' : 'Abrir desplegable'}
        </button>
        <DesplegablePerfil
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          onProfileClick={() => {
            console.log('Perfil clickeado');
            setIsOpen(false);
          }}
          onSettingsClick={() => {
            console.log('Configuraciones clickeadas');
            setIsOpen(false);
          }}
          onLogoutClick={() => {
            console.log('Cerrar sesión clickeado');
            setIsOpen(false);
          }}
        />
      </div>
    );
  },
};
