import React from 'react';
import { useScrollListener } from '@/hooks/useScrollListener.ts';
import { HeaderLayout, HeaderSection } from '@/components/layout/Header.tsx';
import HeaderActions from '@/components/layout/HeaderActions.tsx';
import SearchBar from '@/components/ui/SearchBar.tsx';
import BrandIdentity from '@/components/layout/BrandIdentity.tsx';

interface TopBarProps {
  showSearch?: boolean;
  searchTerm?: string;
  onSearchChange?: (term: string) => void;
  onSearchSubmit?: () => void;
}

const TopBar = ({
  showSearch = false,
  searchTerm = '',
  onSearchChange,
  onSearchSubmit,
}: TopBarProps) => {
  const isScrolled = useScrollListener(10);

  return (
    <HeaderLayout
      variant="transparent"
      className={`sticky top-0 z-30 transition-all duration-300 ${isScrolled ? 'bg-background/80 backdrop-blur-lg shadow-sm border-b border-border/50' : 'bg-transparent'}`}
    >
      <HeaderSection>
        <BrandIdentity showPulse />
      </HeaderSection>

      {showSearch && (
        <HeaderSection align="center" className="order-3 md:order-2">
          <SearchBar
            value={searchTerm}
            onChange={onSearchChange || (() => {})}
            onSubmit={onSearchSubmit}
            navigateOnEnter={!onSearchSubmit}
            containerClassName="w-full md:w-auto md:flex-1 max-w-md"
          />
        </HeaderSection>
      )}

      <HeaderSection align="right" className={`gap-3 ${showSearch ? 'order-2 md:order-3' : ''}`}>
        <HeaderActions />
      </HeaderSection>
    </HeaderLayout>
  );
};

export default React.memo(TopBar);