// import { Button } from "../../../components/ui/button";
// import {
//   DialogBody,
//   DialogCloseTrigger,
//   DialogContent,
//   DialogFooter,
//   DialogHeader,
//   DialogRoot,
//   DialogTitle,
//   DialogTrigger,
// } from "../../../components/ui/dialog";
// import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
// import Edit from "../../../components/ActionIcons/Edit";
// function EditDetails() {
//   return (
//     <DialogRoot placement="center">
//       <DialogTrigger asChild>
//         {/*  */}
//         <Button bg={"#fff"} color={"black"}><Edit /></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">
//             Edit Details
//           </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"
//                 height="30px"
//               />

//               <Field.Label color="black" pt={1} fontSize="12px">
//                 Answer
//               </Field.Label>
//               <Textarea
//                 placeholder="Answer"
//                 bgColor="#EEEEEE"
//                 color="black"
//                 border="none"
//                 pl={1}
//                 fontSize="12px"
//                 height="30px"
//                 pt={1.5}
//               />
//             </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 EditDetails;

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

interface RowData {
  id: string;
  question: string;
  answer: string;
}

function EditDetails(rowData: RowData) {

  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>

        <Button bg="transparent" color={"black"} h={"18px"}>    <Edit /></Button>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        w={{ base: "90%", md: "400px" }}
        height={"auto"}
        p={3}
      >
        <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Edit Details (ID: {rowData?.id})
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Question
              </Field.Label>
              <Input
                placeholder="Question"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                defaultValue={rowData?.question} // Pre-fill question
              />

              <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="30px"
                pt={1.5}
                defaultValue={rowData?.answer} // Pre-fill answer
              />
            </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 EditDetails;
