import { MdOutlineRemoveRedEye } from "react-icons/md"
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Image, Input, Stack } from "@chakra-ui/react"
import img from "../../assets/waterfall.jpg"
function ViewDailog() {
    return (

        <DialogRoot placement="center">
            <DialogTrigger asChild>
                <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
                </Button>
            </DialogTrigger>

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

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

                            <Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
                            <Input placeholder="Enter the Subtitle" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />

                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
                            <Input placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />

                            <Field.Label color="black" pt={1} fontSize="12px">Image</Field.Label>
                            <Image src={img} w="100%" maxH="150px" objectFit="contain" />
                        </Field.Root>
                    </Stack>
                </DialogBody>

                <DialogCloseTrigger color="black" />
            </DialogContent>
        </DialogRoot>

    )
}

export default ViewDailog