import { Column, Row } from './FlexGrid.component'
import type { Meta, StoryObj } from '@storybook/react'

import { IRow } from './FlexGrid.interface'
import React from 'react'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/FlexGrid',
  component: Row,
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {}
} as Meta

export const Simple: StoryObj<IRow> = {
  render: args => (
    <Row {...args}>
      <Column xs={6} md={8} lg={10}>
        Column sm-6 md-8 lg-10
      </Column>
      <Column xs={6} md={4} lg={2}>
        Column sm-6 md-4 lg-2
      </Column>
    </Row>
  ),
  args: {}
}
export const Fluid: StoryObj<IRow> = {
  render: args => (
    <Row {...args}>
      <Column md={8}>Column sm-6 md-8 lg-10</Column>
      <Column md={4}>Column sm-6 md-4 lg-2</Column>
    </Row>
  ),
  args: {
    fluid: true
  }
}

export const Order: StoryObj<IRow> = {
  render: args => (
    <Row {...args}>
      <Column md={8} mobileOrder={2}>
        mobile order 2
      </Column>
      <Column md={4} mobileOrder={1}>
        mobile order 1
      </Column>
    </Row>
  ),
  args: {
    fluid: true
  }
}