import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { UiIcon } from '@/components/UiIcon';
import UiSidebarPopoverMenuItem from './UiSidebarPopoverMenuItem.vue';

const meta: Meta<typeof UiSidebarPopoverMenuItem> = {
  title: 'Patterns/UiSidebar/UiSidebarPopoverMenuItem',
  component: UiSidebarPopoverMenuItem,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Row inside `UiSidebarPopoverMenu`: **`icon`** slot (leading), **`label`**, optional **`shortcut`** text, and **`end-icon`** slot. Active state mirrors sidebar token styling.',
      },
    },
  },
  argTypes: {
    label: {
      control: 'text',
      description: 'Primary text for the row.',
    },
    shortcut: {
      control: 'text',
      description:
        'Hint or keyboard shortcut shown before the end-icon region.',
    },
    isActive: {
      control: 'boolean',
      description: 'Highlights the row as selected.',
    },
    as: {
      control: 'text',
      description: 'Root element for the inner control (default `button`).',
    },
    asChild: {
      control: 'boolean',
      description: 'Merge props onto child instead of rendering default root.',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiSidebarPopoverMenuItem>;

export const Default: Story = {
  render: () => ({
    components: {
      UiIcon,
      UiSidebarPopoverMenuItem,
    },
    template: `
      <div class="w-[22rem] rounded-lg border border-border-surface-default bg-background-surface-floating p-3 shadow-xs">
        <div class="gap-y-1">
          <UiSidebarPopoverMenuItem label="Acme Inc" shortcut="⌘1">
            <template #icon>
              <UiIcon name="command" size="s" />
            </template>
            <template #end-icon>
              <UiIcon name="chevron-right" size="s" aria-hidden="true" />
            </template>
          </UiSidebarPopoverMenuItem>

          <UiSidebarPopoverMenuItem label="Beta Labs" shortcut="⌘2" is-active>
            <template #icon>
              <UiIcon name="command" size="s" />
            </template>
          </UiSidebarPopoverMenuItem>
        </div>
      </div>
    `,
  }),
};
