import { Button } from "../../components/ui/button";
import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../components/ui/dialog";
import { Badge, Field, HStack, Input, Stack, Textarea } from "@chakra-ui/react";
function PendingRequests() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Badge fontSize={"xs"} px={2} bg={'#02a0a01f'}>
          Answer request
        </Badge>
      </DialogTrigger>

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

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Request Type
              </Field.Label>
              <Input
                placeholder="Message"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Solution
              </Field.Label>
              <Textarea
                placeholder=""
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="80px"
                pt={1.5}
              />
            </Field.Root>
          </Stack>
        </DialogBody>
        <DialogFooter
          display={{ base: "block", md: "flex" }}
          justifyContent="center"
          gap={1}
          pt={2}
        >
          <HStack mt={2} mb={3} width={"100%"} justifyContent={"space-between"}>
            <Button
              width={"48%"}
              color="black"
              _hover={{ bgColor: "white" }}
              variant="outline"
              borderRadius="sm"
              border="1px solid #02A0A0"
              size={"xs"}
            >
              Unresolved
            </Button>
            <Button
              width={"48%"}
              borderRadius="sm"
              // bgColor="#007F33"
              bgColor={"#02A0A0"}
              color="white"
              // colorPalette="#007F33"
              size={"xs"}
            >
              Resolved
            </Button>
          </HStack>
        </DialogFooter>

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

export default PendingRequests;
