import { KeyHint, colors } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Key Hint',
  group: 'Primitives',
  section: 'components',
  icon: 'edit',
  component: KeyHint,
  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 KeyHint examples with various colors and hints.',
    style: {
      size: '100%',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          display: 'inline-grid',
          gap: 24,
          gridTemplateColumns: 'repeat(2, auto)',
        }}
      >
        {[
          'Cmd+Alt+A',
          'Cmd+Delete',
          'Shift+A',
          'Cmd+ArrowUp',
          'Esc',
          'Enter',
        ].map((hint) =>
          ['neutral', 'red'].map((color) => (
            <KeyHint key={color} color={color as any} hint={hint as any} />
          )),
        )}
      </div>
    ),
  },
  {
    name: 'Inverted',
    type: 'component',
    description: 'KeyHint examples with inverted colors.',
    style: {
      size: '100%',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          background: colors.neutral100,
          display: 'inline-grid',
          gap: 24,
          gridTemplateColumns: 'repeat(2, auto)',
        }}
      >
        {[
          'Cmd+Alt+A',
          'Cmd+Delete',
          'Shift+A',
          'Cmd+ArrowUp',
          'Esc',
          'Enter',
        ].map((hint) =>
          ['inverted'].map((color) => (
            <KeyHint key={color} color={color as any} hint={hint as any} />
          )),
        )}
      </div>
    ),
  },
  {
    name: 'White',
    type: 'component',
    description: 'KeyHint examples with white color on black background.',
    style: {
      size: '100%',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          background: colors.black100,
          display: 'inline-grid',
          gap: 24,
          gridTemplateColumns: 'repeat(2, auto)',
        }}
      >
        {[
          'Cmd+Alt+A',
          'Cmd+Delete',
          'Shift+A',
          'Cmd+ArrowUp',
          'Esc',
          'Enter',
        ].map((hint) =>
          ['white'].map((color) => (
            <KeyHint key={color} color={color as any} hint={hint as any} />
          )),
        )}
      </div>
    ),
  },
]
