import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Text } from 'components/text';
import { Row } from 'components/layout';
import { Card } from './index';

export default {
  title: 'Design System/Card',
  component: Card,
  argTypes: {
    variant: {
      options: ['plain', 'float', 'outline', 'float-outline'],
      control: { type: 'select' },
    },
    shapeVariant: {
      options: ['square', 'round'],
      control: { type: 'select' },
    },
    sizeVariant: {
      options: ['extra-small', 'small', 'medium', 'large'],
      control: { type: 'select' },
    },
    colorVariant: {
      options: ['base', 'base-01', 'base-02', 'base-02-hover', 'base-03', 'transparent'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Card>;

const child = <Text variant="title">Plain Card with title</Text>;

const Template: ComponentStory<typeof Card> = (args) => {
  return (
    <Row>
      <Card {...args}>{child}</Card>
    </Row>
  );
};

export const Interactive = Template.bind({});
Interactive.args = {
  variant: 'plain',
  sizeVariant: 'medium',
  shapeVariant: 'round',
  colorVariant: 'base-01',
};
