import * as React from 'react';
import { clsx } from 'clsx';

export type StatusTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'accent';

export interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  tone?: StatusTone;
  dot?: boolean;
}

const toneClasses: Record<StatusTone, string> = {
  success:
    'bg-[var(--bl-success-muted,var(--bl-surface-muted))] text-[var(--bl-success)] border-[var(--bl-success)]',
  warning:
    'bg-[var(--bl-warning-muted,var(--bl-surface-muted))] text-[var(--bl-warning)] border-[var(--bl-warning)]',
  danger:
    'bg-[var(--bl-danger-muted,var(--bl-surface-muted))] text-[var(--bl-danger)] border-[var(--bl-danger)]',
  info: 'bg-[var(--bl-info-muted,var(--bl-surface-muted))] text-[var(--bl-info,var(--bl-accent))] border-[var(--bl-info,var(--bl-accent))]',
  neutral: 'bg-[var(--bl-surface-muted)] text-[var(--bl-text-secondary)] border-[var(--bl-border)]',
  accent:
    'bg-[var(--bl-accent-muted,var(--bl-surface-muted))] text-[var(--bl-text-primary)] border-[var(--bl-accent)]',
};

export function StatusDot({
  tone = 'neutral',
  className,
}: {
  tone?: StatusTone;
  className?: string;
}) {
  return (
    <span
      aria-hidden="true"
      className={clsx('h-1.5 w-1.5 rounded-full bg-current', toneClasses[tone], className)}
    />
  );
}

export function StatusBadge({
  tone = 'neutral',
  dot,
  className,
  children,
  ...props
}: StatusBadgeProps) {
  return (
    <span
      className={clsx(
        'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',
        toneClasses[tone],
        className
      )}
      {...props}
    >
      {dot && <StatusDot tone={tone} />}
      {children}
    </span>
  );
}