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

export default {
  title: 'Layout/NavPoint',
  component: NavPoint,
  tags: ['autodocs'],
};

export const Default = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100 relative pb-20">
        <div className="p-4">
          <p className="text-gray-600">Contenido de la aplicación</p>
          <p className="text-gray-600 mt-4">
            El NavPoint está fijo en la parte inferior
          </p>
        </div>
        <NavPoint
          activeItem={activeItem}
          onItemClick={setActiveItem}
        />
      </div>
    );
  },
};

export const ConItemsPersonalizados = {
  render: () => {
    const [activeItem, setActiveItem] = useState('dashboard');
    const customItems = [
      { id: 'dashboard', label: 'Dashboard', icon: 'ChartBarIcon' },
      { id: 'mensajes', label: 'Mensajes', icon: 'ChatBubbleLeftRightIcon' },
      { id: 'notificaciones', label: 'Notificaciones', icon: 'BellIcon' },
      { id: 'configuracion', label: 'Config', icon: 'Cog6ToothIcon' },
    ];
    return (
      <div className="h-screen bg-gray-100 relative pb-20">
        <div className="p-4">
          <p className="text-gray-600">Contenido con items personalizados</p>
        </div>
        <NavPoint
          items={customItems}
          activeItem={activeItem}
          onItemClick={setActiveItem}
        />
      </div>
    );
  },
};
