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

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

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

export const Default = Template.bind({});
Default.args = {
  icon: 'Check'
};

export const Outlined = Template.bind({});
Outlined.args = {
  icon: 'Check',
  variant: 'outlined'
};

export const Disabled = Template.bind({});
Disabled.args = {
  icon: 'Check',
  disabled: true
};

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

function Row(iconButtonProps) {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Col>{iconButtonProps.variant}</Col>
      <Col>
        <IconButton icon="Check" {...iconButtonProps} />
      </Col>
      <Col>
        <IconButton icon="Check" {...iconButtonProps} disabled />
      </Col>
    </div>
  );
}

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

      <Row variant="default" />
      <Row variant="outlined" />
    </div>
  );
};