Pulse Dot

'use client';

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

/**
 * PulseDot — A status indicator with a labeled text and a pulsing dot animation.
 *
 * @param label - Required. Status text.
 * @param color - Optional. Default '#34d399'.
 */
export interface PulseDotProps extends HTMLAttributes<HTMLDivElement> {
  label: ReactNode;
  color?: string;
}

export function PulseDot({ label, color = '#34d399', className, style, ...rest }: PulseDotProps) {
  return (
    <div {...rest} className={['status-wrap', className].filter(Boolean).join(' ')} style={{ '--status-color': color, ...style } as CSSProperties}>
      <div className="pulse-dot" aria-hidden="true" />
      <span className="status-text">{label}</span>
    </div>
  );
}

export default PulseDot;

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

.status-wrap { 
  display: flex; 
  align-items: center; 
  gap: var(--sp-3, 0.6rem); 
  color: var(--status-color); 
  font-weight: 700; 
  font-size: 0.75rem; 
  text-transform: uppercase; 
  letter-spacing: 0.05em;
}

.pulse-dot { 
  width: 8px; 
  height: 8px; 
  background: var(--status-color); 
  border-radius: var(--r-full, 50%); 
  position: relative; 
}

.pulse-dot::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  border-radius: 50%; 
  border: 2px solid var(--status-color); 
  animation: pulse-dot-status-pulse 1.8s infinite; 
}

@keyframes pulse-dot-status-pulse { 
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; } 
}

.status-text { white-space: nowrap; }