import SearchTextInput from '~/src/components/SearchTextInput';
import { useI18n } from '~/src/lib/i18n';

export const ContentLinkSearchInput = ({
  onChange,
  onClear,
  isLoading,
}: {
  onChange: (value: string) => void;
  onClear: () => void;
  isLoading?: boolean;
}) => {
  const { t } = useI18n('dashboard');

  return (
    <SearchTextInput
      testId="dashboardSearch"
      height="5rem"
      placeholder={t('searchLinks')}
      onInputEnd={({ value }) => onChange(value)}
      onClear={onClear}
      withClearButton
      autoFocus
      isLoading={isLoading}
      width="100%"
      maxWidth="auto"
      style={{ contain: 'initial' }}
    />
  );
};