import { type ComponentPropsWithoutRef } from 'react';
import { cx } from '../utils';

export const Spinner = ({
  size,
  className,
  ...props
}: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
  return (
    <span
      role="status"
      aria-label="Loading"
      className={cx('mta-spinner', size && `mta-spinner--${size}`, className)}
      {...props}
    >
      <svg viewBox="0 0 36 36" fill="none">
        <circle
          cx="18"
          cy="18"
          r="14"
          stroke="var(--color-bg-muted)"
          strokeWidth="4"
        />
        <circle
          className="mta-spinner__arc"
          cx="18"
          cy="18"
          r="14"
          stroke="var(--color-accent)"
          strokeWidth="4"
          strokeLinecap="round"
          strokeDasharray="22 88"
        />
      </svg>
    </span>
  );
};
