import type { Meta, StoryObj } from '@storybook/react-vite';
import { AppSidebar } from '@/components/sidebar/app-sidebar.view';
import { NavUserSkeleton } from '@/components/sidebar/nav-user.skeletion';
import { NavUserView } from '@/components/sidebar/nav-user.view';
import { SidebarProvider } from '@/components/ui/sidebar';
import { navData } from '@/lib/navData';
import { user } from '../exampleUser';

const meta = {
  title: 'Layout/Sidebar',
  component: AppSidebar,
  decorators: [
    Story => (
      <SidebarProvider
        style={
          {
            '--sidebar-width': 'calc(var(--spacing) * 72)',
            '--header-height': 'calc(var(--spacing) * 12)',
          } as React.CSSProperties
        }
      >
        <Story />
      </SidebarProvider>
    ),
  ],
  parameters: {
    layout: 'fullscreen',
  },
} satisfies Meta<typeof AppSidebar>;

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

export const Primary: Story = {
  args: {
    navData,
    footerWidget: <NavUserView user={user} />,
  },
};

export const Loading: Story = {
  args: {
    navData,
    footerWidget: <NavUserSkeleton />,
  },
};