Web-Frontend/client/src/components/Canvas/CanvasComponents/Widget.jsx

import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
import { GrUndo } from "react-icons/gr";

export default function Widget(props) {
  // deconstructing props
  const { id, title, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit, children } = props;
  const recipe = useSlotRecipe({ key: "widget" });
  const styles = recipe();


  return (
    <>
      <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
        {isDelete ? (
          <>
            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
              <Text className="widget-handle" w="100%" fontWeight="bold">{title}</Text>
              <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
            </Flex>
          </>
        ):(
          <>
            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
              <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
              {isSubmit ? (
                <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><GrUndo fill="text" /></IconButton>
              ):(null)}
            </Flex>
          </>
        )}
      </chakra.div>
      <chakra.div height="100%" mb="2">
        {children}
      </chakra.div>
    </>
  );
}