import { Select, SelectProps } from '@tidbcloud/uikit'

const SelectWrap = (props: SelectProps & React.RefAttributes<HTMLInputElement>) => {
  return (
    <Select
      size="xs"
      searchable
      styles={(theme) => ({
        root: {
          marginRight: 8
        },
        itemsWrapper: {
          maxWidth: '168px',
          paddingLeft: 4,
          paddingRight: 4,
          whiteSpace: 'nowrap',
          overflow: 'hidden'
        },
        item: {
          overflow: 'hidden',
          textOverflow: 'ellipsis'
        },
        input: {
          height: 28,
          minHeight: 28,
          '&:hover': {
            border: `1px solid ${theme.colors.blue[7]}`
          }
        }
      })}
      {...props}
    />
  )
}

export default SelectWrap