import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Switch } from "../../components/ui/switch";
import { IoMdAdd } from "react-icons/io";
function AddGroup() {
    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"}
                // overflow={'scroll'}
                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="xs">Group Name</Field.Label>
                            <Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />

                            <Field.Label color="black" pt={1} fontSize="xs">Group Introduction</Field.Label>
                            <Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root>

                        <Button w="30%" size={'xs'} bg="#02A0A0" mt={3} color={"#fff"}>
                            Add Member
                        </Button>
                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
                        <Switch />
                    </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 AddGroup