import { Box, HStack, Icon, Text } from "@chakra-ui/react";
import { FaBolt } from "react-icons/fa";
import ChatTypingLoader from "../loading/ChatTypingLoader";
import {
  IoDocumentTextOutline,
  IoImageOutline,
  IoVideocamOutline,
} from "react-icons/io5";

const iconsDic = {
  llm: IoDocumentTextOutline,
  image: IoImageOutline,
  video: IoVideocamOutline,
};

function ResultBox({ type = "llm", loading = false, resultData = "" }) {
  return (
    <Box
      w={"100%"}
      minHeight={"200px"}
      p={4}
      bg="#f5effd"
      boxShadow="sm"
      marginBottom={"4px"}
      border={"1px"}
      borderColor={"purple.100"}
      borderRadius={"10px"}
    >
      <Box
        width={"100%"}
        backgroundColor={"white"}
        padding={"5px"}
        borderRadius={"5px"}
        as={HStack}
        justifyContent={"space-between"}
        id="question"
      >
        <HStack alignItems={"center"} justifyContent={"start"}>
          <Icon as={iconsDic[type]} fontSize={"20px"} />
          <Text fontWeight="bold" fontSize={"18px"}>
            نتیجه
          </Text>
        </HStack>
        <FaBolt color="purple" />
      </Box>
      <Box mt={4} whiteSpace="pre-line">
        {loading && (
          <HStack
            w="100%"
            alignItems="center"
            justifyContent="flex-start"
            mt={2}
          >
            <ChatTypingLoader size="16px" />
          </HStack>
        )}
      </Box>
    </Box>
  );
}

export default ResultBox;