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

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

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

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);
    `}
`;