import { ICONS, Icon, Text } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Icon',
  group: 'Primitives',
  section: 'components',
  icon: 'edit',
  component: Icon,
  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: '100%',
      frame: false,
    },
    render: () => {
      return (
        <div
          style={{
            display: 'grid',
            gap: 24,
            gridAutoRows: '1fr',
            gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))',
          }}
        >
          {[...ICONS]
            .sort((a, b) => a.localeCompare(b))
            .map((variant) => (
              <div
                key={variant}
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  gap: 8,
                  padding: 16,
                  borderRadius: '8px',
                  cursor: 'pointer',
                }}
                onClick={() => {
                  navigator.clipboard.writeText(`<Icon variant="${variant}" />`)
                }}
                onKeyUp={() => {
                  navigator.clipboard.writeText(`<Icon variant="${variant}" />`)
                }}
              >
                <Icon variant={variant} />
                <Text align="center">{variant}</Text>
              </div>
            ))}
        </div>
      )
    },
  },
]
