'use client';

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

/**
 * Header - Hauptkopfzeile des Dashboards
 * @param title - Der Titel des Headers (Standard: "Homelab Dashboard")
 * @param subtitle - Der Untertitel des Headers (Standard: "Übersicht aller verwalteten Dienste")
 */
export function Header({ 
  title = 'Homelab Dashboard',
  subtitle = 'Übersicht aller verwalteten Dienste'
}: HeaderProps) {
  return (
    <header className="bg-gradient-to-r from-slate-900 to-slate-800 border-b border-slate-700 shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="flex flex-col gap-2">
          <h1 className="text-3xl sm:text-4xl font-bold text-white tracking-tight">
            {title}
          </h1>
          <p className="text-slate-400 text-sm">
            {subtitle}
          </p>
        </div>
      </div>
    </header>
  );
}