import { useMemo } from 'react';

import type { SelectProps } from '~/src/components/Select';
import type { FC } from 'react';

import Box from '~/src/components/Box';
import TriangleIcon from '~/src/components/Icon/TriangleIcon';
import Select from '~/src/components/Select';
import Text from '~/src/components/Text';

const ICON_OPACITY = 0.6;

export interface PickerProps
  extends Pick<
    SelectProps,
    'items' | 'value' | 'onChange' | 'title' | 'testId' | 'margin'
  > {
  currentText: string;
  height: string;
}

const Picker: FC<PickerProps> = ({ height, currentText, ...selectProps }) => (
  <Select
    {...selectProps}
    title="Change country"
    isInline
    height={height}
    flexRow
    alignCenter
  >
    {useMemo(
      () => (
        <Box flexRow alignCenter>
          <Text
            size="1.2em"
            withEllipsis
            lineHeight="1.3em"
            letterSpacing={0.02}
          >
            {currentText}
          </Text>
          <TriangleIcon
            size="0.8rem"
            direction="down"
            margin="0.2em 0 0 0.4rem"
            opacity={ICON_OPACITY}
          />
        </Box>
      ),
      [currentText]
    )}
  </Select>
);

export default Picker;