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

const TelegramMainSidebarHeaderCenter = ({
  searchActive,
  search,
  onSearchChange,
  onSearchBlur,
}: MainSidebarHeaderCenterProps) => {
  if (searchActive) {
    return (
      <input
        autoFocus
        value={search}
        onChange={(e) => onSearchChange(e.target.value)}
        onBlur={onSearchBlur}
        placeholder="Поиск"
        className="w-full bg-[var(--tg-bg-secondary)] rounded-full h-9 px-4 outline-none text-[15px]"
      />
    );
  }
  return <div className="text-[18px] font-semibold pl-2">Чаты</div>;
};

export default TelegramMainSidebarHeaderCenter;
