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

import Widget from "./Widget";
import { HStack, Box, Field, Input, Button } from "@chakra-ui/react";
import { useForm } from "react-hook-form";

export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <Widget id={id} title="Alert Level" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}>
      <Box 
        as="form" 
        onSubmit={handleSubmit(onSubmit)}
        width="100%"
        height="100%"
        p={2}
      >
        <Field.Root orientation="horizontal" align>
            <HStack spacing={4} align="center" width="100%">
              <Field.Label whiteSpace="nowrap" width="100%">Country Name</Field.Label>
              <Input {...register("countryname")} placeholder="Enter country name"/>
            </HStack>
        </Field.Root>
      </Box>
    </Widget>
  );
}