'use client';

import { HeaderMobile } from './header/HeaderMobile';
import { HeaderDesktop } from './header/HeaderDesktop';

interface HeaderProps {
  title?: string;
  subtitle?: string;
  syncing?: boolean;
}

export function Header({
  title = 'TowerControl',
  subtitle = 'Task Management',
  syncing = false,
}: HeaderProps) {
  return (
    <header className="relative z-50 bg-[var(--card)]/80 border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
      <div className="container mx-auto px-4 sm:px-6 py-4">
        <HeaderMobile title={title} subtitle={subtitle} syncing={syncing} />
        <HeaderDesktop title={title} subtitle={subtitle} syncing={syncing} />
      </div>
    </header>
  );
}
