import React, { forwardRef } from 'react';
import { twMerge } from 'tailwind-merge';

interface SpinnerSVGProps extends React.SVGProps<SVGSVGElement> {
  spinnerColor?: string;
}

const SpinnerSVG = forwardRef<SVGSVGElement, SpinnerSVGProps>((props, ref) => {
  return (
    <svg
      ref={ref}
      xmlns='http://www.w3.org/2000/svg'
      fill='currentColor'
      viewBox='0 0 24 24'
      {...props}
      className={twMerge('h-5 w-5 animate-spin', props.className)}
    >
      <path d='M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10-10-4.48-10-10c0-.41.34-.75.75-.75s.75.34.75.75c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8c-.41 0-.75-.34-.75-.75S11.59 2 12 2z' />
    </svg>
  );
});

SpinnerSVG.displayName = 'SpinnerSVG';

export default SpinnerSVG;