import React from 'react';
import styled, { css } from 'styled-components';

import type { PropsWithChildren, JSX } from 'react';

import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';

export type BadgeProps = PropsWithChildren<{
  deprecated?: boolean;
  color?: string;
  key?: string;
  className?: string;
  icon?: string;
}>;

export function Badge({ icon, children, ...props }: BadgeProps): JSX.Element {
  return (
    <BadgeComponent {...props} data-component-name="Badge/Badge">
      {icon ? <BadgeIcon icon={icon} /> : null}
      {children}
    </BadgeComponent>
  );
}

const BadgeComponent = styled.span<BadgeProps>`
  display: inline-block;
  padding: 0 var(--spacing-xs);
  vertical-align: middle;
  line-height: var(--line-height-base);
  color: var(--badge-text-color);
  background-color: ${({ color }) => color || 'var(--badge-bg-color)'};
  border-radius: var(--badge-border-radius);
  margin: 0 0 0 0.5em;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);

  ${({ deprecated }) =>
    deprecated &&
    css`
      color: var(--badge-deprecated-text-color);
      background-color: var(--badge-deprecated-bg-color);
      border-radius: var(--badge-deprecated-border-radius);
    `}
`;

const BadgeIcon = styled(GenericIcon)`
  --icon-width: var(--font-size-sm);
  --icon-height: var(--font-size-sm);
  margin-right: var(--spacing-xxs);
  flex-shrink: 0;
  vertical-align: middle;
`;