import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MBuiltInMenu from './MBuiltInMenu.vue';
import { Less24 } from '@mozaic-ds/icons-vue';
import { action } from 'storybook/actions';

const meta: Meta<typeof MBuiltInMenu> = {
  title: 'Navigation/Built-in menu',
  component: MBuiltInMenu,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.',
      },
    },
  },
  args: {
    items: [
      { label: 'Label' },
      { label: 'Label' },
      { label: 'Label' },
      { label: 'Label' },
    ],
    modelValue: 0,
  },
  render: (args) => ({
    components: { MBuiltInMenu },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MBuiltInMenu v-model="args.modelValue" v-bind="args" @update:modelValue="handleUpdate"></MBuiltInMenu>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MBuiltInMenu>;

export const Default: Story = {};

export const WithIcons: Story = {
  args: {
    items: [
      { label: 'Label', icon: Less24 },
      { label: 'Label', icon: Less24 },
      { label: 'Label', icon: Less24 },
      { label: 'Label', icon: Less24 },
    ],
  },
};

export const Outlined: Story = {
  args: {
    outlined: true,
  },
};