import React from 'react';
import FrontCard from './FrontCard';

export default {
  title: 'Components/FrontCard',
  component: FrontCard,
};

const Template = (args) => (
  <div style={args.parentStyle}>
    <FrontCard {...args} />
  </div>
);

export const Default = Template.bind({});
Default.args = {
  value: 5,
  parentStyle: { width: 50, height: 75 },
};

export const AlternateValue = Template.bind({});
AlternateValue.args = {
  value: 8,
  parentStyle: { width: 50, height: 75 },
};

export const EnlargedParent = Template.bind({});
EnlargedParent.args = {
  value: 8,
  parentStyle: { width: 100, height: 150 },
};
