Neon Spinner

---
/**
 * NeonSpinner — A sleek, glowing loading spinner with customizable color and size.
 * 
 * @param {string} color - CSS color for the primary spinning segment. Default is 'var(--c-primary)'.
 * @param {'sm'|'md'|'lg'} size - Predetermined size variant. Default is 'md'.
 */
interface Props {
  color?: string;
  size?: 'sm' | 'md' | 'lg';
}

const { color = 'var(--c-primary, #6366f1)', size = 'md' } = Astro.props;

const dimensions = {
  sm: '24px',
  md: '40px',
  lg: '64px'
};
---

<div 
  class="neon-spinner" 
  style={`--spinner-color: ${color}; --spinner-size: ${dimensions[size]};`}
  role="status"
  aria-label="Loading"
></div>

<style>
  .neon-spinner { 
    width: var(--spinner-size); 
    height: var(--spinner-size); 
    border: 3px solid var(--c-bg-elev, #111); 
    border-top-color: var(--spinner-color); 
    border-radius: var(--r-full, 50%); 
    animation: neon-spin 0.8s linear infinite; 
    filter: drop-shadow(0 0 5px var(--spinner-color)); 
  }
  
  @keyframes neon-spin { 
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); } 
  }
</style>