import { type FC } from 'react';
import { useTranslation } from 'react-i18next';

import { IconSearch } from '@tabler/icons-react';

import InputClassic from '../Classic';

import { type InputSearchProps } from './types';

export const InputSearch: FC<InputSearchProps> = ({
  variant = 'classic',
  ...inputProps
}) => {
  const { t } = useTranslation('material_hu_only');

  return (
    <InputClassic
      placeholder={t('hu_inputs.search_placeholder')}
      startAdornment={<IconSearch />}
      hasCounter={false}
      {...inputProps}
      sx={{
        '& .MuiInputBase-root': {
          backgroundColor: theme =>
            variant === 'custom'
              ? theme.palette.new.action.background.neutral.hover
              : undefined,
          pl: variant === 'custom' ? 1.5 : 2,
          '& .MuiInputBase-input': {
            p: variant === 'custom' ? 1.5 : 2,
            pl: 0,
          },
        },
        ...inputProps?.sx,
      }}
    />
  );
};

export type { InputSearchProps };

export default InputSearch;