import React from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

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}><div className='w-40 h-40 bg-yellow-400'>simple</div></Container>
);
//
/* -------------------------------------------------------------------------- */
/*                          States of your component                          */
/* -------------------------------------------------------------------------- */

export const Desktop: ComponentStory<typeof Container> = Template.bind({});
Desktop.parameters = {
    viewport: {
      defaultViewport: 'desktop',
      styles: {
        height: '568px',
        width: '320px',
      },
    },
    
    
}