import { IconChevronLeft, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import styles from './SearchHeaderH5.module.scss';

interface SearchHeaderH5Props {
  className?: string;
  onBack?: () => void;
}

/**
 * H5 search page header: back button + "Search" title.
 * Copied from the old SearchH5 SearchBar header, used by Embedded/Standard.
 */
export function SearchHeaderH5({ className, onBack }: SearchHeaderH5Props) {
  const { t } = useUIKit();

  return (
    <div className={cs(styles.SearchBar, styles['SearchBar--h5'], className)}>
      <div className={styles.SearchBar__header}>
        <button
          type="button"
          className={styles.SearchBar__back}
          aria-label="Back"
          onClick={onBack}
        >
          <IconChevronLeft size="24px" />
        </button>
        <span className={styles.SearchBar__title}>{t('Search.search')}</span>
      </div>
    </div>
  );
}

export default SearchHeaderH5;