import type { Meta, StoryObj } from '@storybook/vue3'
import { UCardProps } from '../components/UCard/UCard'
import { UCard } from '../components'

const meta: Meta<typeof UCard> = {
  title: 'Example/Card',
  component: UCard,
  tags: ['autodocs'],
  argTypes: {
    color: { control: 'select', options: ['white', 'gray-100'] },
    shadow: { control: 'select', options: ['none', 'sm'] },
    rounded: { control: 'select', options: ['none', 'md', 'lg'] },
    borderColor: { control: 'select', options: ['gray-200', 'error-300'] },
  },
}

export default meta

type Story = StoryObj<typeof UCard>

export const Card: Story = {
  render: (args: UCardProps) => ({
    components: { UCard },
    setup() {
      return { args }
    },
    template: `<UCard 
    v-bind="args" 
    class="w-full h-fit flex flex-col gap-5 py-3 px-3">
        <span>Card</span>
        <span>Card</span>
    </UCard>`,
  }),
  args: {
    color: 'gray-100',
    rounded: 'md',
  } as UCardProps,
}