import React from "react";
import {
  View,
  Image,
  Text,
  StyleSheet,
  ViewStyle,
  TextStyle,
  ImageStyle,
  TouchableOpacity,
  ImageSourcePropType,
} from "react-native";
import { Card, CardContent } from "../Card";
import { useTheme, ThemeType } from "../../theme"; // Import ThemeType

interface BannerWithDetailsProps {
  backgroundImage: ImageSourcePropType;
  logoImage: ImageSourcePropType;
  detailText: string;
  onPress?: () => void;
  containerStyle?: ViewStyle;
  imageStyle?: ViewStyle; // Note: This seems to be applied to backgroundImage style
  logoContainerStyle?: ViewStyle;
  logoStyle?: ImageStyle; // Note: This seems to be applied to logo backgroundImage imageStyle
  textContainerStyle?: ViewStyle;
  textStyle?: TextStyle;
  customLogo?: React.ReactNode; // Note: customLogo prop is declared but not used
  customDetailContent?: React.ReactNode;
}

const BannerWithDetails: React.FC<BannerWithDetailsProps> = ({
  backgroundImage,
  logoImage,
  detailText,
  onPress,
  containerStyle,
  imageStyle,
  logoContainerStyle,
  logoStyle,
  textContainerStyle,
  textStyle,
  customDetailContent,
}) => {
  const {theme} = useTheme();
  const styles = createStyles(theme); // Create styles using theme

  const content = (
    <View style={{ width: "100%", paddingBottom: 50 }}>
      <Card
        style={[styles.container, containerStyle]}
        backgroundImage={{
          source: backgroundImage,
          style: [styles.backgroundImage, imageStyle],
        }}
        borderRadius={15}
      >
        <CardContent style={styles.cardContent}>
          <Card
            style={[styles.logoContainer, logoContainerStyle]}
            backgroundImage={{
              source: logoImage,
              style: [styles.backgroundImage],
              imageStyle: logoStyle,
            }}
          />
          <Card
            variant="elevated" 
            style={[styles.textContainer, textContainerStyle]}
          >
            {customDetailContent || (
              <Text style={[styles.detailText, textStyle]}>
                {detailText}
              </Text>
            )}
          </Card>
        </CardContent>
      </Card>
    </View>
  );

  if (onPress) {
    return <TouchableOpacity onPress={onPress}>{content}</TouchableOpacity>;
  }

  return content;
};

// Function to create themed styles
const createStyles = (theme: ThemeType) =>
  StyleSheet.create({
    container: {
      position: "relative",
      borderRadius: 12,
      padding: 0,
      height: 300,
    },
    backgroundImage: {
      width: "100%",
      height: "100%",
      resizeMode: "cover",
    },
    cardContent: {
      position: "absolute",
      bottom: 0,
      left: 0,
      right: 0,
      padding: 0,
      alignItems: "center",
      transform: [{ translateY: "30%" }],
    },
    logoContainer: {
      marginVertical: 0,
      bottom: -15,
      width: 90,
      height: 80,
      zIndex: 50,
      // Background is image
    },
    textContainer: {
      marginVertical: 0,
      padding: 20,
      height: 80,
      width: "90%",
      justifyContent: "center",
    },
    detailText: {
      textAlign: "center",
      fontSize: 14,
      color: theme.onSurface, // Use standard text color
    },
  });

export default BannerWithDetails;