import React from 'react';
import Badge from './index';
import taste from '../../../Presets/taste';
import { Provider } from '../../../DesignSystem';
import Flex from '../../Layout/Flex';

export default {
  title: 'Core/Typography/Badge',
  component: Badge
};

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

const TasteTemplate = args => {
  return (
    <Provider theme={taste}>
      <Flex>
        <Badge {...args} icon="TheHand" small />
        <Badge {...args} type="tasty" />
        <Badge {...args} type="healthy" />
        <Badge {...args} type="oily" />
        <Badge {...args} type="junkfood" />
      </Flex>
    </Provider>
  );
};

export const Default = Template.bind({});
Default.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  children: 'Default'
};

export const Small = Template.bind({});
Small.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  size: 'small',
  children: 'Small'
};

export const Large = Template.bind({});
Large.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  size: 'large',
  children: 'Small'
};

export const Certified = Template.bind({});
Certified.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  type: 'certified',
  children: 'Certified'
};

export const Tasty = Template.bind({});
Tasty.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  type: 'tasty',
  children: 'Tasty'
};

export const Healthy = Template.bind({});
Healthy.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  type: 'healthy',
  children: 'Healthy'
};

export const Oily = Template.bind({});
Oily.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  type: 'oily',
  children: 'Oily'
};

export const Junkfood = Template.bind({});
Junkfood.args = {
  theme: '',
  icon: 'IlluCookieSolo',
  type: 'junkfood',
  children: 'Junkfood'
};

export const CertifiedTaste = TasteTemplate.bind({});
CertifiedTaste.args = {
  icon: '',
  iconWidth: 18,
  iconColor: '#ffffff',
  type: 'certified',
  children: 'Certified'
};