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

import Block, { BlockProps } from './Block';

export default {
    title: 'Component/Atoms/Block',
    component: Block,
    parameters: {
        component: Block,
        previewTabs: {
            canvas: {
                hidden: true,
            },
        },
        viewMode: 'docs',
    },
} as Meta;

interface ExampleProps {
    children?: React.ReactNode;
    classes: string;
}

const Template: Story<BlockProps> = (args) => (
    <Block className="p-12 text-center text-white bg-indigo-A700" {...args}>
        Block is a wrapper for any html element
    </Block>
);

const Example: Story<ExampleProps> = (args) => {
    const classes = args.classes;
    return classes ? <Block className={args.classes}>{args.children}</Block> : <>{args.children}</>;
};

export const Properties = Template.bind({});
Properties.args = {};

const elements = [
    'First',
    'Second',
    'Third',
    'Fourth',
    'Fifth',
    'Sixth',
    'Seventh',
    'Eighth',
    'Ninth',
    'Tenth',
    'Eleventh',
    'Twelfth',
];

export const Grid = Example.bind({});
Grid.args = {
    children: (
        <Block className="grid grid-cols-1 gap-6 m-12 text-center md:grid-cols-3">
            {elements.map((title) => (
                <Block className="p-6 bg-gray-100">{title}</Block>
            ))}
        </Block>
    ),
};

export const SimpleLayout = Example.bind({});
SimpleLayout.args = {
    children: (
        <Block className="flex flex-col w-full h-[680px]">
            <Block className="flex justify-between w-full shrink-0">
                <Block className="flex-auto p-6 bg-gray-50">Header</Block>
                <Block className="p-6 bg-gray-100 shrink-0">Menu</Block>
            </Block>
            <Block className="flex flex-auto w-full">
                <Block className="p-6 bg-gray-100 lg:max-w-xs lg:w-full">SideBar</Block>
                <Block className="flex-auto p-6 bg-white">Content</Block>
            </Block>
        </Block>
    ),
};
