import { Animated, Image, View, Text, StyleSheet } from "react-native";
import { AntDesign } from "@expo/vector-icons";
import { TravelHistoryActivity } from "../domain/entities/travel_details";
import { formatToDDMMYYYY } from "../../common/utils/time";

interface TravelDetailsTileProps {
  item: TravelHistoryActivity;
  width: Animated.AnimatedInterpolation<string | number>;
  opacity: Animated.AnimatedInterpolation<string | number>;
}

export const TravelDetailsTile = ({
  item,
  width,
  opacity,
}: TravelDetailsTileProps) => {
  return (
    <Animated.View style={{ ...styles.activityContainer, width, opacity }}>
      <Image
        source={{ uri: item.imageUri }}
        style={{
          flex: 2,
          height: "100%",
          borderTopLeftRadius: 2,
          borderBottomLeftRadius: 2,
        }}
      />
      <View style={styles.activityContentContainer}>
        <Text numberOfLines={1} style={styles.activityTitle}>
          {item.name}
        </Text>
        <Text numberOfLines={1}>
          {formatToDDMMYYYY(item.startDate)} - {formatToDDMMYYYY(item.endDate)}
        </Text>
        <Text numberOfLines={1}>{item.description}</Text>
        <View style={styles.ratingContainer}>
          <Text style={styles.ratingText} numberOfLines={1}>
            {item.rating.toFixed(1)}
          </Text>
          <AntDesign name="star" size={20} color="gold" />
        </View>
      </View>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  activityContainer: {
    height: 200,
    padding: 10,
    alignSelf: "center",
    overflow: "hidden",
    flexDirection: "row",
    backgroundColor: "white",
    elevation: 5,
    marginBottom: 10,
    gap: 10,
    borderRadius: 12,
  },
  activityContentContainer: {
    flex: 3,
    flexDirection: "column",
    gap: 10,
  },
  activityTitle: {
    fontSize: 18,
    fontWeight: "bold",
  },
  ratingContainer: {
    position: "absolute",
    right: 10,
    bottom: 10,
    flexDirection: "row",
    alignItems: "center",
    gap: 5,
  },
  ratingText: {
    fontSize: 16,
  },
});
