import type { Meta, StoryObj } from '@storybook/react';
import { HomeIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline';
import { SidebarNavItem } from './SidebarNavItem';

const meta = {
  title: 'Components/SidebarNavItem',
  component: SidebarNavItem,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component: 'Sidebar navigation link with active state styling and collapsed/expanded rendering mode.'
      }
    }
  },
  argTypes: {
    to: {
      description: 'Destination route path.',
      control: 'text',
      table: { type: { summary: 'string' } }
    },
    label: {
      description: 'Navigation item label.',
      control: 'text',
      table: { type: { summary: 'string' } }
    },
    icon: {
      description: 'Icon component rendered before the label.',
      control: false,
      table: { type: { summary: 'ComponentType<SVGProps<SVGSVGElement>>' } }
    },
    collapsed: {
      description: 'Collapsed state. When true, desktop view shows icon-only rail style.',
      control: 'boolean',
      table: { type: { summary: 'boolean' } }
    },
    onClick: {
      description: 'Optional click callback (for example to close mobile drawer).',
      action: 'clicked',
      table: { type: { summary: '() => void' } }
    }
  },
  args: {
    to: '/',
    label: 'Dashboard',
    icon: HomeIcon,
    collapsed: false
  }
} satisfies Meta<typeof SidebarNavItem>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Expanded: Story = {
  render: (args) => (
    <nav className="flex w-56 flex-col gap-1">
      <SidebarNavItem {...args} />
      <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed={args.collapsed} />
      <SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed={args.collapsed} />
    </nav>
  )
};

export const Collapsed: Story = {
  args: {
    collapsed: true
  },
  render: (args) => (
    <nav className="flex w-14 flex-col gap-1">
      <SidebarNavItem {...args} />
      <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed />
      <SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed />
    </nav>
  )
};