import type { ViewerProfile } from '@/entities/user';
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
import { cn } from '@/shared/lib/cn';
import { ProfileMenu } from '@/features/profile-menu';

interface AppTopBarProps {
  user: ViewerProfile;
  oneLiner: string;
  onLogout: () => void;
  visualMode?: AppHubVisualMode;
  onOpenBilling?: () => void;
}

export const AppTopBar = ({
  user,
  oneLiner,
  onLogout,
  visualMode = 'light',
  onOpenBilling,
}: AppTopBarProps) => {
  const cinematic = visualMode === 'cinematic';

  return (
    <header className="relative z-20 px-4 pt-4 sm:px-6 lg:px-8">
      <div
        className={cn(
          'mx-auto flex w-full max-w-6xl items-center justify-between gap-3 rounded-2xl border px-3.5 py-2.5 backdrop-blur-xl sm:px-4',
          cinematic
            ? 'border-white/18 bg-slate-950/44 text-white shadow-[0_16px_44px_rgba(2,6,23,0.36)]'
            : 'border-brand-dark/12 bg-white/80 text-brand-dark shadow-[0_14px_40px_rgba(15,23,42,0.12)]',
        )}
      >
        <div className="min-w-0">
          <p
            className={cn(
              'text-base font-semibold tracking-tight',
              cinematic ? 'text-white/94' : 'text-brand-dark',
            )}
          >
            <span title={oneLiner}>VibeRoom</span>
          </p>
        </div>

        <div className="flex items-center gap-2.5 sm:gap-3">
          <ProfileMenu user={user} onLogout={onLogout} onOpenBilling={onOpenBilling} />
        </div>
      </div>
    </header>
  );
};