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

export default {
  title: 'Design System/Base/View',
  component: View,
  tags: ['autodocs'],
}

export const Surfaces = {
  render: (args) => (
    <View {...args} style={{ height: '100%', gap: 'var(--space-m)' }}>
      <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="700px" />
      <DemoRegion region="footer" label="Footer" />
    </View>
  ),
  args: { layout: 'page' },
}

export const Selectable = {
  render: ({ surface, ...args }) => (
    <View surface={surface} inset="m">
      <View {...args} style={{ height: '80px', width: '80px' }} />
    </View>
  ),
  args: { layout: 'row', surface: 'primary', selectable: true },
}

export const Stack = {
  render: (args) => (
    <View stack horizontal bordered style={{ height: '200px' }} {...args}>
      <View.Item as="section" fill>
        ~Hello...
      </View.Item>
      <View.Item as="section" style={{ width: '300px' }}>
        ...from the other siiiide~
      </View.Item>
    </View>
  ),
}