import { View, Text } from "react-native-ui-lib";
import React from "react";
import { StyleSheet } from "react-native";
import { useFeedbackContext } from "@/contexts/FeedbackContext";
import Feedback from "./Feedback";

const FeedbackList = (props: { searchText: string }) => {
  const { feedbacks } = useFeedbackContext();

  const filteredFeedbacks =
    props.searchText.trim() === ""
      ? feedbacks
      : feedbacks.filter(
          (item) =>
            item.title.toLowerCase().includes(props.searchText.toLowerCase()) ||
            item.text
              .toLowerCase()
              .includes(props.searchText.toLowerCase())
        );

  return (
    <View marginB-70>
      {filteredFeedbacks?.length ? (
        filteredFeedbacks.map((item) => (
          <Feedback key={item.id} item={item} />
        ))
      ) : (
        <Text marginT-20 center style={styles.alert}>
          You have no Feedbacks
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  alert: {
    fontFamily: "PlusJakartaSans_300Light", 
    fontSize: 20
  }
});

export default FeedbackList;