import { PropsWithChildren } from 'react';
import { ActivityIndicator, StyleProp, View, ViewStyle } from 'react-native';
import { tw, useTheme } from '../core';
import { Text } from './form/Text';

interface LoadingProps {
  loading?: boolean;
  dark?: boolean;
  style?: StyleProp<ViewStyle>;
}

export function Loading({ children, loading, dark, style }: PropsWithChildren<LoadingProps>) {
  const { primary } = useTheme();
  return (
    <View style={[tw`flex-row`, style, tw.style({ hidden: !loading })]}>
      <ActivityIndicator color={primary} style={tw.style({ 'mr-2': children !== undefined })} />
      <Text style={tw.style({ color: dark ? primary : undefined })}>{children}</Text>
    </View>
  );
}