import { memo } from "react";
import {
  Animated,
  Dimensions,
  Image,
  Pressable,
  Text,
  TouchableOpacity,
} from "react-native";
import { PlaceInfoEntity } from "../../../place/domain/entities/place_info_entity";
import { Link } from "expo-router";
import { ITEM_HEIGHT, ITEM_WIDTH } from "../../const/caroussel";

interface CarousselTileProps {
  onPress?: () => void;
  item: PlaceInfoEntity;
  translateY: Animated.AnimatedInterpolation<number>;
  scale: Animated.AnimatedInterpolation<number>;
  opacity: Animated.AnimatedInterpolation<number>;
}

export const CarousselTile = memo(
  ({ translateY, scale, opacity, item, onPress }: CarousselTileProps) => {
    return (
      <Pressable onPress={onPress}>
        <Animated.View
          style={{
            width: ITEM_WIDTH,
            height: ITEM_HEIGHT,
            padding: 10,
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Animated.View
            style={{
              transform: [{ translateY }, { scale }],
              opacity,
              height: "90%",
              width: "100%",
              overflow: "hidden",
              borderRadius: 20,
              alignItems: "center",
              justifyContent: "center",
              elevation: 10,
              borderWidth: 7,
              borderColor: "white",
            }}
          >
            <Animated.Image
              source={{ uri: item.imageUri }}
              style={{
                width: "100%",
                height: "100%",
              }}
            />
            <Text
              style={{
                position: "absolute",
                top: 10,
                color: "white",
                fontSize: 20,
                fontWeight: "bold",
                textAlign: "center",
              }}
            >
              {item.name}
            </Text>
          </Animated.View>
        </Animated.View>
      </Pressable>
    );
  }
);
