import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react";
import { IoMdAdd } from "react-icons/io";
import { Button } from "../../../components/ui/button";

function FaqAddModel() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Button px={5} size={"xs"} bg={"#02A0A0"}>
          <IoMdAdd /> <Text>Add</Text>
        </Button>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        // w={{ lg: "60%", md: "230px" }}
        w={{ base: "90%", md: "400px" }}
        height={"auto"}
        p={3} // Reduced padding
        bgSize={"md"}
      >
        <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Add
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Questions
              </Field.Label>
              <Input
                placeholder="Questions"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                _focusVisible={{outline:'none'}}
                size={'sm'}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Answer
              </Field.Label>
              <Textarea
                placeholder="Answer"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                p={2}
                fontSize="12px"
                height="120px"
                resize={'none'}
                _focusVisible={{outline:'none'}}
              />
            </Field.Root>
          </Stack>
        </DialogBody>
        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
          <Button w="100%" bg="#02A0A0" color={"#fff"}>
            Save
          </Button>
        </DialogFooter>

        <DialogCloseTrigger color="black" />
      </DialogContent>
    </DialogRoot>
  );
}

export default FaqAddModel;