import React from 'react';
import { View, ActivityIndicator, Text } from 'react-native';
import { useTheme } from '@theme';
import { getStyles } from './loader.styles';
import { LoaderProps } from './loader.props';

export const Loader: React.FC<LoaderProps> = ({
  size = 'large',
  color,
  message,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const loaderColor = color || colors.icon;

  return (
    <View style={styles.container}>
      <ActivityIndicator size={size} color={loaderColor} />
      {message && <Text style={styles.message}>{message}</Text>}
    </View>
  );
};