import { FC } from 'react';

import FilterAltOutlinedIcon from '@material-hu/icons/material/FilterAltOutlined';
import Box from '@material-hu/mui/Box';

import Button from '@material-hu/components/design-system/Buttons/Button';

import SearchControl from 'src/pages/dashboard/recognitions/components/formControls/SearchControl';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';

export type IdeasSearchProps = {
  searchInput: string;
  handleOnChange: any;
  onOpenIdeaFilter: () => void;
  placeholder?: string;
};

export const IdeasSearch: FC<IdeasSearchProps> = props => {
  const {
    searchInput,
    handleOnChange,
    onOpenIdeaFilter,
    placeholder = '',
  } = props;

  const { t } = useTranslation();

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        my: 3,
        px: 2,
      }}
    >
      <SearchControl
        searchInput={searchInput}
        onChange={handleOnChange}
        placeholder={placeholder}
      />
      <Button
        startIcon={<FilterAltOutlinedIcon />}
        sx={{ color: '#182a4d' }}
        size="large"
        onClick={onOpenIdeaFilter}
      >
        {t('FILTERS')}
      </Button>
    </Box>
  );
};

export default IdeasSearch;