type Props = { size?: 'lg' | 'md' | 'sm' | 'xs'; muted?: boolean }

const sizes = {
  lg: 'w-8 h-8 border-4',
  md: 'w-6 h-6 border-2',
  sm: 'w-5 h-5 border-2',
  xs: 'w-4 h-4 border-2',
}

export default function Spinner({ size = 'lg', muted = false }: Props) {
  const accent = muted
    ? 'border-t-stone-500'
    : 'border-t-stone-900 dark:border-t-stone-100'
  return (
    <div className={`${sizes[size]} border-stone-200 dark:border-stone-700 ${accent} rounded-full animate-spin`} />
  )
}
