import React from 'react'

export const Badge = ({
  label,
  children,
  variant = 'neutral',
  size = 'm',
  ...props
}) => (
  <>
    <style href="@ossy/design-system/badge" precedence="high">
    {`
      [data-badge] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 999px;
        font-family: var(--font-family, sans-serif);
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
      }

      [data-badge][data-badge-size="s"] {
        font-size: 11px;
        padding: 2px 8px;
      }

      [data-badge][data-badge-size="m"] {
        font-size: 13px;
        padding: 4px 10px;
      }

      [data-badge][data-badge-variant="success"] {
        background: hsl(142, 76%, 90%);
        color: hsl(142, 60%, 25%);
      }

      [data-badge][data-badge-variant="warning"] {
        background: hsl(38, 100%, 90%);
        color: hsl(38, 80%, 30%);
      }

      [data-badge][data-badge-variant="danger"] {
        background: hsl(0, 86%, 92%);
        color: hsl(0, 70%, 35%);
      }

      [data-badge][data-badge-variant="neutral"] {
        background: hsl(0, 0%, 90%);
        color: hsl(0, 0%, 35%);
      }

      [data-badge][data-badge-variant="info"] {
        background: hsl(210, 100%, 92%);
        color: hsl(210, 70%, 30%);
      }
    `}
    </style>
    <span
      data-badge
      data-badge-variant={variant}
      data-badge-size={size}
      {...props}
    >
      {label ?? children}
    </span>
  </>
)