import { Button } from './Button';
import styles from '../Buttons/Button.module.css';

export default {
  title: 'Base/Button',
  component: Button,
  argTypes: {
    onClick: { action: 'clicked' },
  },
};

export const Primary = () => (
  <div className={styles.buttoncolumn}>
    <Button variant="primary" label="Default" />
    <Button variant="primary" label="Loading..." loading="true" />
    <Button variant="primary" label="Disabled" disabled />
    <Button variant="primary" label="Small" size="sm" />
    <Button variant="primary" label="Medium" size="md" />
    <Button variant="primary" label="Large" size="lg" />
  </div>
);
Primary.parameters = {
  backgrounds: { default: 'primary-bg' ,value:"white"}, // white
};

export const Secondary = () => (
  <div className={styles.buttoncolumn}>
    <Button variant="secondary" label="Default" />
    <Button variant="secondary" label="Loading..." loading="true" />
    <Button variant="secondary" label="Disabled" disabled />
    <Button variant="secondary" label="Small" size="sm" />
    <Button variant="secondary" label="Medium" size="md" />
    <Button variant="secondary" label="Large" size="lg" />
  </div>
);
Secondary.parameters = {
  backgrounds: { default: 'secondary-bg' }, // blue
};
