import React, { useState } from "react";
import { Image, View, Text } from "react-native";
import { ActivityIndicator } from "react-native-paper";

const ImageWithLoader = ({ uri, style }) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  return (
    <View style={[style, { justifyContent: "center", alignItems: "center" }]}>
      {/* Loader */}
      {loading && !error && (
        <ActivityIndicator
          size="small"
          color="#000"
          style={{ position: "absolute", zIndex: 10 }}
        />
      )}

      {/* Error Message or fallback */}
      {error ? (
        <Text style={{ color: "red", fontSize: 12 }}>Image not available</Text>
      ) : (
        <Image
          source={{ uri }}
          style={style}
          onLoadStart={() => {
            setLoading(true);
            setError(false);
          }}
          onLoadEnd={() => setLoading(false)}
          onError={() => {
            setLoading(false);
            setError(true);
          }}
        />
      )}
    </View>
  );
};

export default ImageWithLoader;
