import { Button } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Button',
  group: 'Interactables',
  section: 'components',
  icon: 'edit',
  component: Button,
  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: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => <Button tooltip="Button">Button</Button>,
  },
  {
    name: 'With lead icon',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button leadIcon="checkmark" tooltip="Done">
        Done
      </Button>
    ),
  },
  {
    name: 'With trail icon',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button trailIcon="arrow-right" tooltip="Next">
        Next
      </Button>
    ),
  },
  {
    name: 'With key hint',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button keyHint="Enter" tooltip="Send">
        Send
      </Button>
    ),
  },
  {
    name: 'With counter',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button counter={2} tooltip="Go to checkout">
        Go to checkout
      </Button>
    ),
  },
  {
    name: 'Small',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button size="small" tooltip="Button">
        Button
      </Button>
    ),
  },
  {
    name: 'Loading',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button loading leadIcon="checkmark" tooltip="Button">
        Button
      </Button>
    ),
  },
  {
    name: 'Disabled',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button disabled tooltip="Button">
        Button
      </Button>
    ),
  },
  {
    name: 'Border',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button variant="border" tooltip="Button">
        Button
      </Button>
    ),
  },
  {
    name: 'Ghost',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button variant="ghost" tooltip="Button">
        Button
      </Button>
    ),
  },
  {
    name: 'Red',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <Button color="red" tooltip="Button">
        Button
      </Button>
    ),
  },
]
