import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, Image } from "react-native";
import { Props } from "./FeedBackHelp.types";
import { styles } from "./FeedBackHelp.styles";
import ThumCircle from "../../assets/ReactSVG/ThumCircle";

export default function FeedBackHelp(Props: Props) {
  const onThumbsUp = () => {
    if (Props.onThumbsUp) {
      Props.onThumbsUp();
    }
  };
  const onThumbsDown = () => {
    if (Props.onThumbsDown) {
      Props.onThumbsDown();
    }
  };
  return (
    <View>
      <View
        style={{
          backgroundColor: "lightgray",
          padding: 15,
          borderRadius: 10,
          flexDirection: "row",
        }}
      >
        <View>
          <Text style={{ fontSize: 16, fontWeight: "bold" }}>
            Are these results helpful?
          </Text>
          <Text>Your feedback helps us improve search results</Text>
        </View>
        <View
          style={{
            flexDirection: "row",
            marginLeft: 10,
            alignItems: "center",
          }}
        >
          <TouchableOpacity onPress={onThumbsUp} style={{ marginRight: 8 }}>
            <Image source={require("../../assets/ThumbsUp.png")} />
          </TouchableOpacity>
          <TouchableOpacity onPress={onThumbsDown}>
            <Image source={require("../../assets/ThumbsDown.png")} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}