import React from "react";
import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
import Card from "../Card";
import CardHeader from "../CardHeader";
import { LinearGradient } from "expo-linear-gradient";

interface SimpleTrendingCardProps {
  backgroundImage: ImageSourcePropType;
  icon?: React.ReactNode;
  iconPosition?: "left" | "right";
  onPress?: () => void;
  shadowEffect?: boolean;
  shadowOpacity? : number;
  style?: StyleProp<ViewStyle>;
}
const SimpleTrendingCard: React.FC<SimpleTrendingCardProps> = ({
  backgroundImage,
  onPress,
  icon,
  iconPosition = "left",
  shadowEffect = true,
  shadowOpacity = 0.5,
  style,
}) => {
  return (
    <Card
      onPress={onPress}
      style={[{ width: 250, height: 300 }, style]}
      backgroundImage={{
        source: backgroundImage,
        resizeMode: "cover",
      }}
    >
      {shadowEffect && (
        <LinearGradient
          colors={[`rgba(0, 0, 0, ${shadowOpacity})`, "transparent"]}
          start={{ x: 0.5, y: 1 }}
          end={{ x: 0.5, y: 0 }}
          style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
        />
      )}

      {icon && (
        <CardHeader
          left={iconPosition === "left" ? icon : null}
          right={iconPosition === "right" ? icon : null}
          style={{ alignItems: "center" }}
        />
      )}
    </Card>
  );
};

export default SimpleTrendingCard;