import React from "react";
import {Box, Button, Flex, Input, InputGroup, InputRightElement, Stack, Text,} from "@chakra-ui/react";
import {AddIcon, SearchIcon} from "@chakra-ui/icons";
// import avatar from "./../../assets/images/avatar.svg";

// interface headerProps {
//   goBack?: any;
//   isBack?: boolean;
//   title: string;
// }
const DelightHeader = (props: any) => {
    const {logo, secondaryColor, primaryColor, menuItems, username, title, buttonTitle} = props;
    return (
        <>
            <Flex
                borderBottom="1px solid #DFE0EB"
                // bg={primaryColor}
                h="71px"
                px="61.62px"
                pb="17px"
                pt="16px"
                minW="100%"
                alignItems="center"
                justifyContent="space-between"
            >
                <Stack isInline spacing="47px">
                    <Box
                        height="38px"
                        width="auto"
                        left="50px"
                        top="75px"
                        padding="10px"
                        color={secondaryColor}
                        border="1px"
                        borderRadius="3px"
                        borderColor={secondaryColor}
                    >
                        <Text
                            fontFamily="Inter"
                            fontSize="13px"
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="18px"
                            letterSpacing="0em"
                            textAlign="center"
                        >
                            {title}
                        </Text>
                    </Box>

                    <InputGroup w="235px" h="38px">
                        <InputRightElement
                            pointerEvents="none"
                            children={<SearchIcon color="gray.300"/>}
                        />
                        <Input
                            type="tel"
                            placeholder="Search"
                            _placeholder={{
                                fontFamily: "Inter",
                                fontSize: "13px",
                                fontStyle: "normal",
                                fontWeight: "700",
                                lineHeight: "18px",
                                letterSpacing: "0em",
                                textAlign: "left",
                            }}
                        />
                    </InputGroup>
                </Stack>
                <Button
                    leftIcon={<AddIcon height="8.8" width="8.8"/>}
                    bg={secondaryColor}
                    color={primaryColor}
                    variant="solid"
                    _hover={{bg: "blue.700"}}
                >
                    <Text
                        fontFamily="Inter"
                        fontSize="13px"
                        fontStyle="normal"
                        fontWeight="700"
                        lineHeight="18px"
                        letterSpacing="0em"
                        textAlign="center"
                    >
                        {buttonTitle}
                    </Text>
                </Button>
            </Flex>
        </>
    );
};

export default DelightHeader;