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

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Checkbox Input',
  group: 'Inputs',
  section: 'components',
  icon: 'edit',
  component: CheckboxInput,
  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: 'Default',
    type: 'component',
    description: 'Default checkbox input example.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState(false)
      return <CheckboxInput value={value} onChange={setValue} />
    },
  },
  {
    name: 'Error',
    type: 'component',
    description: 'Checkbox input with error state.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState(true)
      return <CheckboxInput error value={value} onChange={setValue} />
    },
  },
  {
    name: 'Disabled',
    type: 'component',
    description: 'Checkbox input in a disabled state.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState(true)
      return <CheckboxInput value={value} onChange={setValue} disabled />
    },
  },
  {
    name: 'With label',
    type: 'component',
    description: 'Checkbox input with a label and error state.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState(false)
      return (
        <CheckboxInput
          value={value}
          onChange={setValue}
          label="I accept the Terms & Conditions."
        />
      )
    },
  },
]
