import { OptionCardGroup } from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Option Card Group',
  group: 'Interactables',
  section: 'components',
  icon: 'edit',
  component: OptionCardGroup,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Two',
    type: 'component',
    description: 'OptionCardGroup with two options.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('one')

      return (
        <div style={{ width: 480 }}>
          <OptionCardGroup
            value={value}
            onChange={setValue}
            options={[
              { label: 'Table', icon: 'sheet', value: 'table' },
              { label: 'Grid', icon: 'grid', value: 'grid' },
            ]}
          />
        </div>
      )
    },
  },
  {
    name: 'Three',
    type: 'component',
    description: 'OptionCardGroup with three options.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('one')

      return (
        <div style={{ width: 480 }}>
          <OptionCardGroup
            value={value}
            onChange={setValue}
            options={[
              { label: 'Table', icon: 'sheet', value: 'table' },
              { label: 'Grid', icon: 'grid', value: 'grid' },
              { label: 'Calendar', icon: 'calendar', value: 'calendar' },
            ]}
          />
        </div>
      )
    },
  },
  {
    name: 'Four',
    type: 'component',
    description: 'OptionCardGroup with four options.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState('four')

      return (
        <div style={{ width: 480 }}>
          <OptionCardGroup
            value={value}
            onChange={setValue}
            options={[
              { label: 'Table', icon: 'sheet', value: 'table' },
              { label: 'Grid', icon: 'grid', value: 'grid' },
              { label: 'Calendar', icon: 'calendar', value: 'calendar' },
              { label: 'List', icon: 'rows', value: 'list' },
            ]}
          />
        </div>
      )
    },
  },
]
