import React from 'react';
import classNames from 'classnames/bind';
import { Box, Input } from '@nova-hf/ui';
import { InputProps } from '@nova-hf/ui/umd/ts/src/form-elements/input/Input';
import s from './SearchInput.module.scss';

const cn = classNames.bind(s);

export const SearchInput = (props: InputProps) => {
  return (
    <>
      <Box
        borderBottomStyle="solid"
        borderColor={props.value ? 'grey200' : 'transparent'}
        marginLeft={-9}
        marginRight={-9}
        marginTop={[props.value ? 0 : 10, props.value ? 0 : 15, props.value ? -5 : 29]}
        borderWidth="1px"
        transition="medium"
      />
      <Input {...props} className={cn(s.searchInput, { hasValue: !!props.value })} />

      <Box
        borderBottomStyle="solid"
        borderColor={props.value ? 'grey200' : 'transparent'}
        marginLeft={-9}
        marginRight={-9}
        marginBottom={props.value ? 5 : 29}
        borderWidth="1px"
        transition="medium"
      />
    </>
  );
};