import React from 'react';
import { Story, Meta } from '@storybook/react';
import { Title } from './index'

export default {
  title: 'atoms/Title',
  component: Title,
} as Meta;

const Template: Story = (args: any) => <Title {...args} >Basic</Title>;

export const Basic = Template.bind({});
Basic.args = {
  title: 'Hello, Storybook!',
  color: 'blue',
  fontSize: '20px',
  fontWeight: 600,
};

export const Default = () => <Title size='sm' >Hola</Title>

export const CustomClass = () => (
  <Title className="custom-class" >Title with Custom Class</Title>
);

export const MultipleClasses = () => (
  <Title className={['class1', 'class2', 'class3']} >Title with Custom Class</Title>
);

export const CustomStyle = () => (
  <Title color="default" weight='normal' >Title with Custom Class</Title>
);