import React from 'react'
import { DemoRegion } from '../../../../.storybook/demo/DemoRegion.jsx'
import { View } from './View.jsx'

export default {
  title: 'Design System/Layout',
  component: View,
  tags: ['autodocs'],
  render: (args) => (
    <View {...args} gap="m" style={{ height: '100%', minHeight: 0 }}>
      <DemoRegion region="header" label="header" />
      <DemoRegion region="sidebar-primary" label="sidebar-primary" />
      <DemoRegion region="sidebar-secondary" label="sidebar-secondary" />
      <DemoRegion region="content" label="Content" minHeight="450px" />
      <DemoRegion region="footer" label="footer" />
    </View>
  ),
}

export const ContentLayout = { args: { layout: 'page' } }

export const Sidebar = { args: { layout: 'sidebar' } }

export const OffCenter = { args: { layout: 'off-center' } }

export const OffCenterSmall = { args: { layout: 'off-center-s' } }

export const OffCenterMedium = { args: { layout: 'off-center-m' } }