Badge

'use client';

import type { HTMLAttributes, ReactNode } from 'react';
import './Badge.css';

/**
 * Badge — A compact visual indicator for labels, categories, or status tags.
 *
 * @param variant - Optional. 'default' | 'success' | 'warning' | 'danger' | 'info'. Default 'default'.
 * @param dot - Optional. Show a leading status dot. Default false.
 * @param pulse - Optional. Pulse the dot. Default false.
 */
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
  dot?: boolean;
  pulse?: boolean;
  children?: ReactNode;
}

export function Badge({ variant = 'default', dot = false, pulse = false, className, children, ...rest }: BadgeProps) {
  return (
    <span {...rest} className={['badge', `badge--${variant}`, className].filter(Boolean).join(' ')}>
      {dot && <span className={['badge__dot', pulse && 'badge__dot--pulse'].filter(Boolean).join(' ')} />}
      {children}
    </span>
  );
}

export default Badge;

/* Badge — ported from astro-component-kit (feedback/Badge.astro) */

.badge { 
  display: inline-flex; 
  align-items: center; 
  gap: var(--sp-2, 0.4rem); 
  padding: var(--sp-1, 0.25rem) var(--sp-3, 0.7rem); 
  border-radius: var(--r-full, 100px); 
  font-size: 0.72rem; 
  font-weight: 700; 
  letter-spacing: 0.05em; 
  text-transform: uppercase; 
  white-space: nowrap; 
  border: 1px solid transparent;
  transition: 0.2s;
}

.badge--default { background: rgba(148, 163, 184, 0.12); color: var(--c-text-2, #94a3b8); border-color: var(--c-border, rgba(148, 163, 184, 0.2)); }
.badge--success { background: rgba(52, 211, 153, 0.12); color: #34d399; border-color: rgba(52, 211, 153, 0.25); }
.badge--warning { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); }
.badge--danger { background: rgba(248, 113, 113, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.25); }
.badge--info { background: rgba(129, 140, 248, 0.12); color: var(--c-primary-light, #818cf8); border-color: rgba(129, 140, 248, 0.25); }

.badge__dot { width: 6px; height: 6px; border-radius: var(--r-full, 50%); background: currentColor; flex-shrink: 0; }
.badge__dot--pulse { animation: badge-dot-pulse 2s ease-in-out infinite; }

@keyframes badge-dot-pulse { 
  0%, 100% { opacity: 1; transform: scale(1); } 
  50% { opacity: 0.4; transform: scale(0.7); } 
}