import React from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';
import { COLOR_SCALES } from '@/theme/colors';
import { FLEX } from '@/theme/mixins';
import { paragraph } from '@/theme/typography';
import Text from './Text';

const Loading = ({ 
  message = 'Yükleniyor...', 
  size = 'large',
  fullscreen = true,
  color = COLOR_SCALES.primary[50]
}) => {
  return (
    <View style={[
      styles.container,
      fullscreen ? styles.fullscreen : styles.partial
    ]}>
      <ActivityIndicator size={size} color={color} />
      {message && <Text style={styles.message}>{message}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...FLEX.center,
    backgroundColor: "#fff",
    padding: 24,
  },
  fullscreen: {
    ...FLEX.fill,
  },
  partial: {
    paddingVertical: 40,
  },
  message: {
    ...paragraph['M/Regular'],
    color: COLOR_SCALES.colorGray[70],
    marginTop: 16,
    textAlign: 'center',
  },
});

export default Loading;