import { Link } from "react-router-dom";
import { Cpu, Database } from "lucide-react";

export default function Header() {
  return (
    <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
      <div className="max-w-6xl mx-auto px-4 py-4 md:py-5">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3 md:gap-4">
            {/* Logos Container */}
            <div className="flex items-center gap-2 sm:gap-3">
              <img 
                src="/unma.png" 
                alt="Logo UNMA" 
                className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all" 
              />
              <img 
                src="/fakultas.png" 
                alt="Logo Fakultas" 
                className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all" 
              />
              <img 
                src="/teknik.png" 
                alt="Logo Teknik" 
                className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all" 
              />
              <img 
                src="/informatika.png" 
                alt="Logo Informatika" 
                className="h-8 sm:h-10 md:h-12 w-auto object-contain transition-all" 
              />
              <img 
                src="/deepx.png" 
                alt="Logo DeepX" 
                className="h-6 sm:h-8 md:h-10 w-auto object-contain transition-all" 
              />
            </div>
            
            {/* Divider and Title */}
            <div className="border-l border-slate-200 pl-3 md:pl-4">
              <h1 className="text-lg md:text-xl font-bold text-slate-900 leading-tight">
                PlatDetect
              </h1>
              <p className="text-xs md:text-sm text-slate-500 leading-tight">
                Sistem Deteksi dan Pengenalan Plat Nomor Kendaraan
              </p>
            </div>
          </div>
          <Link
            to="/dashboard"
            className="flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-medium px-3 py-2 rounded-lg transition-colors"
          >
            <Database className="w-4 h-4" />
            <span className="hidden sm:inline">Dashboard</span>
          </Link>
        </div>
        <div className="mt-3 flex items-center gap-2 text-xs text-slate-400">
          <Cpu className="w-3.5 h-3.5" />
          <span>Menggunakan YOLO, OCR, FastAPI, dan React</span>
        </div>
      </div>
    </header>
  );
}