import Separator from '@/lib/components/Separator';
import { commonArgTypes } from '@/lib/constants';
import { Meta } from '@storybook/vue3/*';

const meta = {
  title: 'Layout Component/Separator',
  component: Separator,
  parameters: {
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '시각적, 의미적으로 콘텐츠를 구분하는 선'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Separator component 크기'
    },
    color: {
      ...commonArgTypes.color,
      defaultValue: { summary: 'slate' },
      description: 'Separator component 색상'
    },
    orientation: {
      table: {
        category: 'Props',
        type: { summary: ['horizontal', 'vertical'].join(' | ') }
      },
      options: ['horizontal', 'vertical'],
      description: 'Separator component 방향',
      defaultValue: { summary: 'horizontal' }
      // control: { type: 'select' },
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large', 'fill-large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large', 'fill-large'],
      defaultValue: { summary: 'medium' },
      description: 'Separator component 크기'
    }
  }
} as Meta;

export const Default = {
  render: (args: any) => ({
    components: {
      Separator
    },
    setup() {
      return { args };
    },
    template: `
    <Separator v-bind="args"/>
    `
  })
};
export default meta;

export const Horizontal = {
  render: (args: any) => ({
    components: {
      Separator
    },
    setup() {
      return { args };
    },
    template: `
      <div class="grid w-96 gap-4">
    <Separator size="small" />
    <Separator size="medium" />
    <Separator size="large" />
    <Separator size="fill-large" />
  </div>
    `
  }),

  parameters: {
    docs: {
      source: {
        code: `
    <template>
      <Separator size="small" />
      <Separator size="medium" />
      <Separator size="large" />
      <Separator size="fill-large" />
    </template>
        `
      }
    }
  }
};

export const Vertical = {
  render: (args: any) => ({
    components: {
      Separator
    },
    setup() {
      return { args };
    },
    template: `
      <div class="grid h-60 w-14 grid-cols-4">
    <Separator orientation="vertical" size="small" />
    <Separator orientation="vertical" size="medium" />
    <Separator orientation="vertical" size="large" />
    <Separator orientation="vertical" size="fill-large" />
  </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <template>
    <Separator orientation="vertical" size="small" />
    <Separator orientation="vertical" size="medium" />
    <Separator orientation="vertical" size="large" />
    <Separator orientation="vertical" size="fill-large" />
    </template>
        `
      }
    }
  }
};