import {blackDrop} from "../../images";
import {HStack, Image, Menu, MenuButton, MenuItem, MenuList,} from "@chakra-ui/react";
import {Text} from "@chakra-ui/layout";
import React from "react";

function CustomStaticDropDownWhite(props: any) {
    const {options, placeholder, OnChange} = props;

    return (
        <>
            <Menu gutter={0}>
                <MenuButton
                    border="1px solid black"
                    borderTopRightRadius="2.89px"
                    borderTopLeftRadius="2.89px"
                    bg="white"
                    w="107px"
                    h="28px"
                    color="black"
                    className="interFonts"
                    fontWeight="700"
                    fontSize="12px"
                >
                    <HStack justifyContent="space-around" w="100%" pl="21px">
                        <Text textAlign="center">{placeholder}</Text>
                        <Image alignSelf="right" src={blackDrop}/>
                    </HStack>
                </MenuButton>
                <MenuList
                    py={0}
                    borderBottom="none"
                    borderTop="none"
                    borderRadius="none"
                    borderRight="0.96px solid"
                    borderLeft="0.96px solid"
                    borderColor="#626D85"
                    maxWidth="107px"
                    minWidth="107px"
                >
                    {options.map((option: any, index: number) => {
                        return (
                            <MenuItem
                                lineHeight="14.52px"
                                letterSpacing="0.04px"
                                paddingLeft="7px"
                                borderBottom="1px solid #626D85"
                                color="#626D85"
                                className="interFonts"
                                fontWeight="700"
                                fontSize="12px"
                                onClick={() => {
                                    OnChange(option.value);
                                }}
                            >
                                {option.label}
                            </MenuItem>
                        );
                    })}
                </MenuList>
            </Menu>
        </>
    );
}

export default CustomStaticDropDownWhite;