import { Avatar } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Avatar',
  group: 'Primitives',
  section: 'components',
  icon: 'edit',
  component: Avatar,
  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: 24,
            gridTemplateColumns: 'auto auto auto',
          }}
        >
          {[
            undefined,
            'neutral',
            'inverted',
            'red',
            'blue',
            'green',
            'orange',
          ].map((color, index) => (
            <Avatar
              key={index}
              src="https://public.linear.app/9fa6f7a2-5e7d-4fb8-af60-d35ba4592b2c/2bd65f8b-2f43-4b01-95fb-170bdd1a1280/368af3c7-dc76-4729-a5a6-3809399c312a"
              {...((color ? { color } : {}) as any)}
            />
          ))}
        </div>
      )
    },
  },
]
