import React from 'react';
import { Meta, Story } from '@storybook/react';

import description from './Card.md';
import Card, { CardProps } from './Card';
import CardMedia from '../CardMedia/CardMedia';
import IrisImage from '../IrisImage/IrisImage';
import CardBody from '../CardBody/CardBody';

const meta: Meta = {
  title: 'Components/Card',
  component: Card,
  parameters: {
    docs: {
      description: {
        component: description,
      },
    },
  },
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
    className: {
      type: 'string',
    },
    size: {
      control: {
        type: 'select',
        options: [null, 'sm', 'lg'],
      },
    },
    borderless: {
      control: {
        type: 'boolean',
      },
    },
  },
};

export default meta;

const Template: Story<CardProps> = (args) => (
  <Card {...args} style={{ maxWidth: 630 }}>
    <CardMedia>
      <IrisImage
        alt="white house"
        src="/69/172169-131-EC7BA047/White-House-Washington-DC-portico-USA-Pennsylvania.jpg"
        width={630}
        height={368}
        command="crop"
      />
    </CardMedia>
    <CardBody>
      <div className="font-18 font-weight-bold mb-5">Card Body</div>
      You can put any content in here with whatever formatting you&apos;d like.
    </CardBody>
  </Card>
);

export const Default = Template.bind({});

Default.args = {};