import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
import { ActivityInfoEntity } from "../../domain/entities/activity_info_entity";
import { LIGTHT_THEME } from "../../constants/theme";

interface ActivityTileProps {
  activity: ActivityInfoEntity;
  onPress?: (id: number) => void;
}

export const ActivityTile = ({ activity, onPress }: ActivityTileProps) => {
  return (
    <TouchableOpacity onPress={() => {
      onPress && onPress(activity.id);
    }} activeOpacity={0.7} style={styles.container}>
      <View>
        <Image
          source={{ uri: activity.imageUri }}
          style={{ width: "100%", height: 200 }}
        />
      </View>
      <View style={styles.info_container}>
        <Text style={styles.activity_name} >{activity.name}</Text>
        <Text>{activity.location}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 300,
    width: "100%",
    backgroundColor: LIGTHT_THEME.color.white,
    elevation: 5,
    borderWidth: 1,
    borderRadius: 10,
    overflow: "hidden",
  },
  info_container: {
    padding: 10,
    gap: 5,
  },
  activity_name: {
    fontSize: 18,
    fontWeight: "bold",
  },
});
