import Text from '@/components/Text';
import Styles from '@/constants/Styles';
import { useTheme } from '@/providers/ThemeProvider';
import { MaterialCommunityIcons } from "@expo/vector-icons";
import React from 'react';
import { View } from 'react-native';

interface ErrorViewProps {
   title?: string;
   message?: string;
   icon?: keyof typeof MaterialCommunityIcons.glyphMap;
}

/**
 * ErrorView component to display error or empty states.
 * Used when data is not found, deleted, or an error occurs during fetching.
 */
export default function ErrorView({ 
   title = "Terjadi Kesalahan", 
   message = "Data tidak ditemukan atau sudah dihapus.",
   icon = "alert-circle-outline"
}: ErrorViewProps) {
   const { colors } = useTheme();

   return (
      <View style={[Styles.flex1, Styles.contentItemCenter, Styles.ph20]}>
         <View style={[Styles.mb10]}>
            <MaterialCommunityIcons 
               name={icon} 
               size={40} 
               color={colors.dimmed} 
            />
         </View>
         <Text style={[Styles.textDefaultSemiBold, { color: colors.text, textAlign: 'center' }]}>
            {title}
         </Text>
         <Text style={[Styles.textMediumNormal, { color: colors.dimmed, textAlign: 'center', marginTop: 4 }]}>
            {message}
         </Text>
      </View>
   );
}