import { FiSearch, FiMenu, FiDroplet } from 'react-icons/fi';
import { type Language, t } from '../translations';
import { useLocation } from 'react-router-dom';

interface Props {
  language: Language;
  onToggleMobileMenu?: () => void;
}

const Topbar = ({ language, onToggleMobileMenu }: Props) => {
  const dict = t[language].topbar;
  const location = useLocation();
  const showSearch = location.pathname === '/' || location.pathname === '/favorites';

  return (
    <div className="topbar">
      <div className="topbar-mobile-header">
        <FiMenu onClick={onToggleMobileMenu} className="mobile-only" style={{ fontSize: '1.5rem', cursor: 'pointer' }} />
        
        <div className="mobile-only" style={{ alignItems: 'center', gap: '0.5rem', fontWeight: 'bold', fontSize: '1.25rem' }}>
          <FiDroplet color="var(--color-cyan)" />
          <span>Hladinator</span>
        </div>

        {showSearch && (
          <div className="search-bar">
            <FiSearch />
            <input type="text" placeholder={dict.search} />
          </div>
        )}
      </div>
    </div>
  );
};

export default Topbar;
