'use client';

import { FC } from 'react';
import { cn } from '@/utils/helpers';
import styles from './Loading.module.scss';

export interface LoadingProps {
  size?: 'sm' | 'md' | 'lg';
  fullScreen?: boolean;
  tip?: string;
  className?: string;
}

export const Loading: FC<LoadingProps> = ({ size = 'md', fullScreen = false, tip, className }) => {
  const content = (
    <div className={cn(styles.loading, styles[`loading--${size}`], className)}>
      <div className={styles.loading__spinner}>
        <svg viewBox="0 0 50 50">
          <circle
            cx="25"
            cy="25"
            r="20"
            fill="none"
            stroke="currentColor"
            strokeWidth="4"
            strokeLinecap="round"
          />
        </svg>
      </div>
      {tip && <span className={styles.loading__tip}>{tip}</span>}
    </div>
  );

  if (fullScreen) {
    return <div className={styles.loading__fullScreen}>{content}</div>;
  }

  return content;
};
