import { LogIn } from 'lucide-react';

interface EvaluationHeaderProps {
  onGoToAdmin: () => void;
  isAdminLoggedIn?: boolean;
}

export default function EvaluationHeader({ onGoToAdmin, isAdminLoggedIn }: EvaluationHeaderProps) {
  return (
    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8 border-b border-slate-200/50 pb-5">
      <div>
        <span className="text-xs font-semibold uppercase tracking-wider text-blue-600 bg-blue-50 px-3 py-1.5 rounded-full inline-block">
          Kuesioner Evaluasi Kinerja
        </span>
        <div className="mt-3">
          <img 
            src="https://yptgkp.or.id/wp-content/uploads/2023/05/LOGO-TULISAN.jpg" 
            alt="Yayasan Perguruan Tinggi GKP" 
            className="h-12 md:h-16 object-contain rounded-xl border border-slate-200 bg-white p-1.5 shadow-3xs"
            id="app-logo"
          />
        </div>
        <p id="app-desc" className="text-slate-600 text-sm mt-2 font-medium">
          Penilaian Kinerja Pimpinan
        </p>
      </div>

      <button
        onClick={onGoToAdmin}
        id="btn-portal-admin"
        className="flex items-center gap-2 px-4 py-2.5 bg-slate-950 hover:bg-slate-800 text-white text-xs font-bold rounded-xl shadow-md transition cursor-pointer shrink-0"
      >
        <LogIn className="h-4 w-4" />
        <span>{isAdminLoggedIn ? 'Kembali ke Dashboard' : 'Portal Administrasi'}</span>
      </button>
    </div>
  );
}