import { memo, useState } from 'react';
import { withTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import SearchInput from '../../shared-components/SearchInput';

function Welcome({ t }) {
  const [query, setQuery] = useState('');
  const navigate = useNavigate();

  const onInputType = (event) => {
    const { target } = event;
    const value = target?.value ?? '';
    setQuery(value);
  };

  const onSearch = () => {
    const trimmedQuery = query.trim();
    if (!trimmedQuery) {
      return;
    }

    navigate(`/rent-and-buy/search?query=${trimmedQuery}`);
  };

  return (
    <section className="h-[calc(100vh-72px)] mb-[105px] bg-home-welcome bg-cover">
      <div className="flex flex-col max-w-8xl w-full mx-auto pt-160 px-10">
        <h1 className="max-w-[910px] mb-[30px] text-7xl font-bold text-primary-light">
          {t('title')}
        </h1>
        <p className="max-w-[820px] mb-[100px] text-2xl font-medium text-primary-light">
          {t('subtitle')}
        </p>
        <SearchInput
          className="max-w-[780px]"
          mode="simple"
          placeholder={t('main_input_placeholder')}
          btnText={t('main_input_btn')}
          query={query}
          onType={onInputType}
          onSearch={onSearch}
        />
      </div>
    </section>
  );
}

export default withTranslation('homePage')(memo(Welcome));