import React, { FC } from 'react';
import { CountrySelectComponentProps } from 'react-phone-number-input';
import { Box } from '~/components/Box';
import { CountrySelect } from '~/components/CountrySelect';
import { SvgWorld } from '~/assets/images/icons';
import * as sc from './styles';

export interface Props extends CountrySelectComponentProps {}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Select: FC<Props> = ({ options, ...otherProps }) => {
  return (
    <Box minWidth={50}>
      <CountrySelect
        variant="ghost"
        styles={{
          valueContainer: (styles: any) => ({
            ...styles,
            paddingRight: 0,
            paddingLeft: 0,
            alignSelf: 'stretch',
          }),
          singleValue: (styles: any) => ({
            ...styles,
            maxWidth: 'auto',
          }),
          menu: (styles: any) => ({
            ...styles,
            minWidth: '20rem',
            marginLeft: '-0.6rem',
          }),
        }}
        components={{ SingleValue: sc.SingleValue }}
        placeholder={<sc.Placeholder Asset={SvgWorld} width={25} height={25} />}
        {...otherProps}
      />
    </Box>
  );
};
