import { View, Text } from "react-native-ui-lib";
import React, { useState } from "react";
import {
  TouchableWithoutFeedback,
} from "react-native-gesture-handler";
import { IFeedback } from "@/contexts/FeedbackContext";
import EditFeedback from "./EditFeedback";

const Feedback = (props: { item: IFeedback }) => {
  const [isVisible, setIsVisible] = useState<boolean>(false);

  return (
    <View>
      <TouchableWithoutFeedback onPress={() => setIsVisible(true)}>
        <View
          backgroundColor="white"
          marginV-5
          paddingH-13
          paddingV-10
          style={{ borderRadius: 15, elevation: 2 }}
        >
          <Text
            text70B
            style={{ fontSize: 15, fontFamily: "Manrope_600SemiBold" }}
            marginB-8
          >
            {props.item.title}
          </Text>
          <Text
            text70
            style={{
              fontSize: 13,
              fontFamily: "Manrope_400Regular",
              color: "#5c5c5c",
            }}
          >
            {props.item.text}
          </Text>
        </View>
      </TouchableWithoutFeedback>
      <EditFeedback
        item={props.item}
        isVisible={isVisible}
        setIsVisible={setIsVisible}
      />
    </View>
  );
};

export default Feedback;