import React from 'react';
import LottieView from 'lottie-react-native';
import {useTheme} from '@shared/theme';

import SpinnerDark from './assets/spinnerDark.json';
import SpinnerLight from './assets/spinnerLight.json';

export interface SpinnerProps {
  dark?: boolean;
  size?: number;
}

export function Spinner({dark, size}: SpinnerProps) {
  const {isDarkMode, iconSizes} = useTheme();
  const spinnerSize = size || iconSizes.x6;

  return (
    <LottieView
      source={isDarkMode || dark ? SpinnerDark : SpinnerLight}
      style={{width: spinnerSize, height: spinnerSize}}
      duration={1000}
      autoPlay
      loop
    />
  );
}