import React, { HTMLAttributes } from 'react';
import styled, { css } from 'styled-components';
import type { StatusTone } from '@/styles/theme';

export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
  tone: StatusTone;
  size?: 'sm' | 'md';
  dot?: boolean;
}

type StyledProps = {
  $tone: StatusTone;
  $size: NonNullable<StatusBadgeProps['size']>;
  $dot: boolean;
};

const StyledStatusBadge = styled.span<StyledProps>`
  display: inline-flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[2]};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  border-radius: ${({ theme }) => theme.borderRadius.full};
  white-space: nowrap;
  border: 1px solid ${({ theme, $tone }) => theme.colors.status[$tone].border};
  background-color: ${({ theme, $tone }) => theme.colors.status[$tone].bg};
  color: ${({ theme, $tone }) => theme.colors.status[$tone].text};
  line-height: 1.35;

  ${({ $size, theme }) =>
    $size === 'sm'
      ? css`
          padding: 0.125rem ${theme.spacing[2]};
          font-size: ${theme.typography.fontSize.xs};
        `
      : css`
          padding: 0.25rem ${theme.spacing[3]};
          font-size: ${theme.typography.fontSize.sm};
        `}

  ${({ $dot, theme, $tone }) =>
    $dot &&
    css`
      &::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: ${theme.colors.status[$tone].text};
        flex-shrink: 0;
      }
    `}
`;

export const StatusBadge: React.FC<StatusBadgeProps> = ({
  tone,
  size = 'sm',
  dot = false,
  children,
  ...rest
}) => (
  <StyledStatusBadge $tone={tone} $size={size} $dot={dot} {...rest}>
    {children}
  </StyledStatusBadge>
);