import React from 'react';
import Title from './index';

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

const Template = args => <Title {...args}>{args?.children}</Title>;

export const H1 = Template.bind({});
H1.args = {
  level: 'h1',
  color: '#212121',
  children: 'Hello World',
  decoration: ''
};

export const H1WithDecoration = Template.bind({});
H1WithDecoration.args = {
  level: 'h1',
  color: '#212121',
  children: 'Hello World',
  decoration: 'underline'
};

export const H1WithColor = Template.bind({});
H1WithColor.args = {
  level: 'h1',
  color: '#ffce43',
  children: 'Hello World',
  decoration: ''
};

export const H2 = Template.bind({});
H2.args = {
  level: 'h2',
  color: '#212121',
  children: 'Hello World',
  decoration: ''
};

export const H3 = Template.bind({});
H3.args = {
  level: 'h3',
  color: '#212121',
  children: 'Hello World',
  decoration: ''
};

export const H4 = Template.bind({});
H4.args = {
  level: 'h4',
  color: '#212121',
  children: 'Hello World',
  decoration: ''
};

export const H5 = Template.bind({});
H5.args = {
  level: 'h5',
  color: '#212121',
  children: 'Hello World',
  decoration: ''
};

export const H6 = Template.bind({});
H6.args = {
  level: 'h6',
  color: '#212121',
  children: 'Hello World',
  decoration: ''
};