import React, { useContext, useEffect, useState } from "react";
import { View, Text, Image, StyleSheet } from "react-native";
import { getRequest } from "../request";
import { globalStyles } from "../styles/global";
import { windowWidth } from "../utils/Dimensions";

const PostDetailsScreen = ({ navigation, route }) => {
  const [post, setPost] = useState({});

  const fetchPost = async () => {
    const { data } = await getRequest(`api/posts/${route.params.id}?populate=*`);
    if (data) {
      setPost(data.data);
    }
  };

  useEffect(() => {
    fetchPost();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Image
        style={styles.image}
        source={{
          uri: `http://localhost:1337${post?.attributes?.profileImage.data.attributes.url}`,
        }}
      />
      <Text style={[globalStyles.boldText, styles.title]}>
        {post?.attributes?.title}
      </Text>
        <Text style={[globalStyles.regularText ,styles.description]}>{post?.attributes?.description}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  image: {
    width: windowWidth,
    height: 300,
  },
  title: {
    marginTop: 20,
    textAlign: "center",
  },
  description: {
    marginHorizontal: 20
  }
});

export default PostDetailsScreen;