import * as React from 'react'
import classNames from 'classnames'
import { highlightTextColors } from '../../colors'

import { Text, types } from 'react-bricks/frontend'
import blockNames from '../../blockNames'
import { badgeColorsEditProps } from '../../LayoutSideProps'

export interface BadgeProps {
  badgeColor: { color: string; className: string }
  textAlign: 'left' | 'center'
  className?: string
  badgeText: types.TextValue
}

const Badge: types.Brick<BadgeProps> = ({
  badgeColor,
  textAlign,
  className,
  badgeText,
}) => {
  return (
    <div className="flex justify-center items-center">
      <Text
        renderBlock={(props) => (
          <span
            className={classNames(
              'text-sm font-extrabold uppercase inline-block min-w-[120px]',
              textAlign === 'center' ? 'text-center' : 'text-left',
              badgeColor.className,
              className
            )}
            style={{ letterSpacing: '0.35em' }}
          >
            {props.children}
          </span>
        )}
        placeholder="Badge..."
        propName="text"
        value={badgeText}
      />
    </div>
  )
}

Badge.schema = {
  name: blockNames.Badge,
  label: 'Badge',
  category: 'shared',
  hideFromAddMenu: true,
  playgroundLinkLabel: 'View source code on Github',
  playgroundLinkUrl:
    'https://github.com/ReactBricks/reactbricks-starters/blob/main/packages/reactbricks-ui/nextjs-pages/src/shared/bricks/Badge.tsx',
  getDefaultProps: () => ({
    text: 'Special',
    textAlign: 'center',
    badgeColor: highlightTextColors.SKY.value,
  }),
  sideEditProps: [badgeColorsEditProps],
}

export default Badge