import { IconButton, MiniSheet } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Mini Menu',
  group: 'Interactables',
  section: 'components',
  icon: 'edit',
  component: MiniSheet,
  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: () => {
      return (
        <MiniSheet>
          <MiniSheet.Trigger>
            {({ open }) => (
              <IconButton
                icon="text-styling"
                forceHover={open}
                trailChevron="down"
                size="small"
              />
            )}
          </MiniSheet.Trigger>
          <MiniSheet.Items>
            <MiniSheet.Item icon="bold" size="small" />
            <MiniSheet.Item icon="italic" size="small" />
            <MiniSheet.Item icon="underline" size="small" />
            <MiniSheet.Item icon="strikethrough" size="small" />
            <MiniSheet.Separator />
            <MiniSheet.Item icon="numbered-list" size="small" />
            <MiniSheet.Item icon="bulleted-list" size="small" />
          </MiniSheet.Items>
        </MiniSheet>
      )
    },
  },
]
