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

const meta: Meta<typeof MFlag> = {
  title: 'Indicators/Flag',
  component: MFlag,
  parameters: {
    docs: {
      description: {
        component:
          'A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.',
      },
    },
  },
  args: {
    label: 'Flag label',
  },
  render: (args) => ({
    components: { MFlag },
    setup() {
      return { args };
    },
    template: `
      <MFlag v-bind="args"></MFlag>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MFlag>;

export const Standard: Story = {};

export const Accent: Story = {
  args: { appearance: 'accent' },
};

export const Danger: Story = {
  args: { appearance: 'danger' },
};

export const Inverse: Story = {
  globals: {
    backgrounds: { value: 'inverse' },
  },
  args: { appearance: 'inverse' },
};