import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Card from '../components/Ui/Card/Card';
import CardImage from '../assets/images/thumb3.jpg';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'UI elements/Card',
  component: Card,
  // Sets the layout parameter component wide.
  parameters: {
    layout: 'centered',
  },
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {

  },
} as ComponentMeta<typeof Card>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;

export const BasicCard = Template.bind({});
BasicCard.args = {
  cardTitle:'Card title',
  cardSubTitle:'Card subtitle', 
  cardContent:'Some quick example text to build on the card title and make up the bulk of the card content.'
};

export const ButtonCard = Template.bind({});
ButtonCard.args = {
  cardTitle:'Card title',
  cardSubTitle:'Card subtitle', 
  cardContent:'Some quick example text to build on the card title and make up the bulk of the card content.',
  buttonShow: true,
  buttonLabel: 'Go somewhere'
};

export const ImageCard = Template.bind({});
ImageCard.args = {
  cardTitle:'Card title',
  cardSubTitle:'Card subtitle', 
  cardContent:'Some quick example text to build on the card title and make up the bulk of the card content.',
  image: CardImage
};