import { Counter } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Counter',
  group: 'Primitives',
  section: 'components',
  icon: 'edit',
  component: Counter,
  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 (
        <div style={{ display: 'flex', gap: 32, flexDirection: 'column' }}>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 24,
            }}
          >
            {[
              'neutral',
              'inverted',
              'red',
              'green',
              'blue',
              'orange',
              'white',
            ].map((color, index) => (
              <Counter key={index} color={color as any}>
                0
              </Counter>
            ))}
          </div>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 24,
            }}
          >
            {[
              'neutral',
              'inverted',
              'red',
              'green',
              'blue',
              'orange',
              'white',
            ].map((color, index) => (
              <Counter key={index} color={color as any}>
                99+
              </Counter>
            ))}
          </div>
        </div>
      )
    },
  },
]
