import React from 'react';
import { Meta, Story } from '@storybook/react';
import {
  AtomCardContainer,
  ICardContainerProps,
} from 'react/atoms/CardContainer';
import { theme } from 'data/dataMx';

const meta: Meta = {
  title: 'React/atoms',
  component: AtomCardContainer,
  argTypes: {
    bgColor: {
      control: {
        type: 'select'
      },
      options: Object.keys(theme),
    },
    margin: {table: {disable: true}},
    padding: {table: {disable: true}},
    flexDirection: {table: {disable: true}},
    alignItems: {table: {disable: true}},
    alignContent: {table: {disable: true}},
    justifyContent: {table: {disable: true}},
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateCardContainer: Story<ICardContainerProps> = (props) => (
  <AtomCardContainer {...props} />
);

export const CardContainer = TemplateCardContainer.bind({});

CardContainer.args = {
  height: '360px',
  width: '460px',
};
