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

const InstagramMainSidebarHeaderCenter = ({
  searchActive,
  search,
  onSearchChange,
  onSearchBlur,
}: MainSidebarHeaderCenterProps) => {
  if (searchActive) {
    return (
      <input
        autoFocus
        value={search}
        onChange={(e) => onSearchChange(e.target.value)}
        onBlur={onSearchBlur}
        placeholder="Поиск"
        className="w-full h-9 px-3 rounded-full bg-[var(--tg-bg-secondary)] outline-none text-[14px] text-[var(--tg-text-primary)] placeholder:text-[var(--tg-text-secondary)] border border-transparent focus:border-[var(--tg-divider)]"
      />
    );
  }
  return (
    <div className="text-[18px] font-semibold pl-1 tracking-tight text-[var(--tg-text-primary)]">
      Сообщения
    </div>
  );
};

export default InstagramMainSidebarHeaderCenter;
