const meta = {
  title: 'Components/ThemeCard',
  component: ThemeCard,
} satisfies Meta<typeof ThemeCard>
export default meta

type Story = StoryObj<typeof ThemeCard>
export const Primary = {
  args: {
    pathName: '',
    holder: 'aa',
    desc: 'aaaa',
  },
  //args에 들어갈 타입을 지정ㅏㄹ 수 있습니다
  argTypes: {
    pathName: { control: 'color' },
  },
  //자동으로 Document를 생성합니다
  tags: ['autodocs'],
  //Decorator는 Wrapper와 같은 역할을 합니다
  decorators: [
    (Story: any) => (
      <div className="w-96">
        <Story />
      </div>
    ),
  ],
} satisfies Story

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const PrimaryLongName: Story = {
  args: {
    ...Primary.args,
    label: 'Primary with a really long name',
  },
};

variant: {
  options: ['primary', 'secondary'],
  control: { type: 'radio' },
},

  argTypes: {
    currentMenu: { control: 'select', options: MAIN_MENU.map((it) => it.name) },
  },

variant: { control: 'color' },

// .storybook/preview.ts
const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

  parameters: {
    backgrounds: {
      values: [
        { name: 'green', value: '#0f0' },
        { name: 'red', value: '#f00' },
        { name: 'blue', value: '#00f' },
      ],
    },
  }

{/* ButtonDocs.mdx */}

import { Meta, Primary, Controls, Story } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

A button is ...

<Primary />

## Props

<Controls />

## Stories

### Primary

A button can be of primary importance.

<Story of={ButtonStories.Primary} />

A button can be of secondary importance.

<Story of={ButtonStories.Secondary} />

{/* ... */}