import React from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import Container from './Container';

export default {
  // Title inside navigation bar
  title: 'Container',
  // Component to test
  component: Container,
  // Clarifying the way how to process specific
  // properties of your component and which values
  // it can accept.
} as ComponentMeta<typeof Container>;

/**
 * This is a way to define a tempalte for your component.
 * 
 * This template should cover all the states.
 * 
 * In most cases you should just distruct args attribute
 * on a returning component.
 */
const Template: ComponentStory<typeof Container> = (args) => (
  <Container {...args}></Container>
);
//
/* -------------------------------------------------------------------------- */
/*                          States of your component                          */
/* -------------------------------------------------------------------------- */

export const Desktop: ComponentStory<typeof Container> = Template.bind({});
Desktop.args = {
  className: 'bg-blue-500 w-840 block',
  children: <div>840px</div>,   
    
}

Desktop.parameters = {
  viewport: {
     defaultViewport: 'desktop',
     
     viewports: {

          desktop: {
            name: 'main_container',
            styles: {
                width: '840px',
                height: '100%',
                paddingLeft: '0.5rem',
                paddingRight: '0.5rem',
            },
            type: 'desktop',
          },

          screen_sm: {
            name: 'screen_sm',
            styles: {
                width:  'calc(100% - 30px)',
                height: '100%',
            },
            type: 'tablet',
          },

          screen_md: {
            name: 'screen_md',
            styles: {
                width:  'calc(100% - 30px)',
                height: '100%',
            },
            type: 'tablet',
          },

          screen_lg_xl_2xl: {
            name: 'lg-xl-2xl',
            styles: {
                width: '840px',
                height: '100%',
            },
            type: 'desktop',
          },
     }
  }
}