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


function CustomStaticDropDownBlue(props: any) {


    const {
        options,
        placeholder,
        OnChange,
    } = props;


    return (
        <>
            <Menu gutter={0}>
                <MenuButton borderTopRightRadius="2.89px" borderTopLeftRadius="2.89px" bg="#3F8DF1" w="130px" h="28px"
                            color="white" className="interFonts" fontWeight="700" fontSize="12px">
                    <HStack justifyContent="space-around" w="100%" pl="22px"><Text textAlign="center">
                        {placeholder}

                    </Text><Image alignSelf="right" src={whiteDropArrow}/></HStack>
                </MenuButton>

                <MenuList py={0} borderBottom="none" borderRadius="none" borderTop="0.96px solid"
                          borderRight="0.96px solid" borderLeft="0.96px solid" borderColor="#626D85" maxWidth='130px'
                          minWidth='130px'>
                    {options.map((option: any, index: number) => {
                        return (
                            <MenuItem lineHeight="14.52px" letterSpacing="0.04px" paddingLeft="7px"
                                      borderBottom="0.96px solid #626D85" color="#626D85" className="interFonts"
                                      fontWeight="700" fontSize="12px"
                                      onClick={() => {
                                          OnChange(option.value)
                                      }}
                            >
                                {option.label}
                            </MenuItem>
                        )
                    })
                    }

                </MenuList>
            </Menu>
        </>

    );
}


export default CustomStaticDropDownBlue;