// import { MyLabel } from "../../components/MyLabel";

// // Siempre debe haber una exportacion por defecto con un titulo y el componente.
// export default {
//     title: 'UI/MyLabel',
//     component: MyLabel
// }

// const Template = () => <MyLabel/>

// // Esta sería una historia.
// // Esto es como crear una copia del Template rompiendo la referencia que js tiene con los objetos.
// export const Basic = Template.bind({});

// export const AllCaps = Template.bind({});

// export const Secondary = Template.bind({});


//* ********************************************************************************************************* */
//* ********************************************************************************************************* */
//* ********************************************************************************************************* */
//* ********************************************************************************************************* */

//* Lo de arriba es como se hizo en el video de fherrera, abajo es como se hace con la version 7. Ejemplo sacado
//* de la documentacion oficial: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

import type { Meta, StoryObj } from '@storybook/react';

import { MyLabel } from "../../components/MyLabel";

// const meta: Meta<typeof MyLabel> = {
//     // title: 'UI/Etiquetas/MyLabel',
//     title: 'UI/MyLabel',
//     component: MyLabel,
// };
// Lo de arriba tambien se puede escribir así:
const meta = {
    // title: 'UI/Etiquetas/MyLabel',
    title: 'UI/MyLabel',
    component: MyLabel,
    // Habilita la documentación generada automáticamente para la historia del componente
    tags: ['autodocs'],
    // I. Se puede definir argumentos a nivel de componente; se aplicarán a todas las historias del componente a
    // menos que despues se sobrescriban.
    //
    // Crea tipos especificos específicos:
    argTypes: {
        // Con esto le cambio el tipo de control a size para que en la documentacion se mueste con un select en
        // lugar de un option. Ademas le podemos indicar las opciones que pueden ser distintas a las definidas en
        // el componente o solo algunas de ellas.
        // size: {control: 'select', options: ['Otra opcion']}
        size: {control: 'select'},
        color: {control: 'select'},
        fontColor: {control: 'color'}, // con control:'color', se muestra un selector de colores.
    },
    // Argumenos para todos.
    args: {
        
        
    },
    // F.
} satisfies Meta<typeof MyLabel>;

export default meta;

type Story = StoryObj<typeof MyLabel>;

export const Basic: Story = {
    render: (args) => <MyLabel {...args}/>,
    // Con esto le indicamos un valor por defecto en size.
    args: {
        size: 'normal',
        allCaps: false // true para capitalizar toda la palabra.
    },
};
// Esta es otra forma de pasar un valor por defecto.
// Basic.args = {
//     size: 'normal'
// }

export const AllCaps: Story = {
    render: (args) => <MyLabel {...args}/>,
    args: {
        size: 'normal',
        allCaps: true
    },
};

export const Secondary: Story = {
    render: (args) => <MyLabel {...args}/>,
    args: {
        size: 'normal',
        color: 'secondary'
    },
};

export const Tertiary: Story = {
    render: (args) => <MyLabel {...args}/>,
    args: {
        size: 'normal',
        color: 'tertiary'
    },
};

export const CustomFontColor: Story = {
    render: (args) => <MyLabel {...args}/>,
    args: {
        size: 'h1',
        fontColor: '#5517ac'
    },
};