import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
import { Undo } from 'lucide-react';

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 (
    <Flex flexDirection="column" w="100%" h="auto">
      {/* HEADER */}
      <Flex css={styles.header} cursor={isEditable ? "move":"default"} flexDirection="row" w="100%" h="auto" justifyContent="space-between" alignItems="center">
        <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
        {isDelete ? (
          <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
        ):(
          isSubmit ? (
            <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
          ):null
        )}
      </Flex>

      {/* CHILDREN */}
      <Flex w="100%" h="auto">
        {children}
      </Flex>
    </Flex>
  );
}