import React from 'react';
import styled from 'styled-components';
import OutlinedButton from './index';

export default {
  title: 'Core/Controls/OutlinedButton',
  component: OutlinedButton
};

const Template = args => {
  return <OutlinedButton {...args} />;
};

export const Default = Template.bind({});
Default.args = {
  children: 'Try for free'
};

export const Disabled = Template.bind({});
Disabled.args = {
  children: 'Try for free',
  disabled: true
};

const Col = styled.span`
  display: inline-block;
  width: 200px;
  text-align: center;
  text-transform: capitalize;
`;

function Row(buttonProps) {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Col>
        <OutlinedButton {...buttonProps} />
      </Col>
      <Col>
        <OutlinedButton {...buttonProps} disabled />
      </Col>
    </div>
  );
}

export const AllCases = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
      <div>
        <Col></Col>
        <Col>Disabled</Col>
      </div>

      <Row size="small">Try for free</Row>
      <Row size="medium">Try for free</Row>
      <Row size="large">Try for free</Row>
    </div>
  );
};