// components/CloseIcon.tsx
import React from "react";
import {
  TouchableOpacity,
  StyleSheet,
  ViewStyle,
  TextStyle,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme, ThemeType } from "../../theme"; // Assuming your theme setup is here

interface CloseIconProps {
  onPress?: () => void;
  show?: boolean;
  customIcon?: React.ReactNode;
  variant?: "floating" | "nested";
  containerStyle?: ViewStyle;
  iconStyle?: TextStyle;
  color?: string; // Prop for specific color override
  size?: number;
  isRTL?: boolean;
}

const CloseIcon: React.FC<CloseIconProps> = ({
  onPress,
  show = true,
  customIcon,
  variant = "nested",
  containerStyle,
  iconStyle,
  color: colorProp, // Renamed to avoid conflict with theme color
  size = 28,
  isRTL = false,
}) => {
  const {theme, isRTL : rtl} = useTheme();
  isRTL = rtl;
  
  const styles = themedStyles(theme);

  // Use prop color if provided, otherwise use theme text color
  const iconColor = colorProp ?? theme.text;

  // Calculate default position based on variant and RTL
  const defaultPosition =
    variant === "nested"
      ? { top: 10, [isRTL ? "left" : "right"]: 10 }
      : { top: -12, [isRTL ? "left" : "right"]: -12 };

  if (!show || !onPress) {
    return null; // Don't render if not shown or no onPress handler
  }

  return (
    <TouchableOpacity
      style={[styles.container, defaultPosition, containerStyle]}
      onPress={onPress}
      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }} // Improve touch area
    >
      {customIcon || (
        <Ionicons
          name="close"
          size={size}
          color={iconColor}
          style={iconStyle}
        />
      )}
    </TouchableOpacity>
  );
};

const themedStyles = (theme: ThemeType) =>
  StyleSheet.create({
    container: {
      position: "absolute",
      zIndex: 10, // Ensure it's above other elements
    },
  });

export default CloseIcon;