import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';

export default function DiagnosticHeader({ compact = false }) {
  return (
    <header
      className="border-b"
      style={{ background: '#FAF6EF', borderColor: 'rgba(212,175,56,0.35)' }}
    >
      <div className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 ${compact ? 'py-3' : 'py-4'}`}>
        <Link href="/online-algebra-1-tutoring" className="flex min-w-0 items-center gap-2.5">
          <span
            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-[10px] font-extrabold"
            style={{ background: 'linear-gradient(135deg, #4A1429, #8B2252)', color: '#D4AF37' }}
          >
            CV
          </span>
          <span className="min-w-0">
            <span
              className="block truncate text-xs font-extrabold"
              style={{ color: '#2D0A18', fontFamily: "'Fraunces', Georgia, serif" }}
            >
              Cambridge Veritas
            </span>
            <span className="block truncate text-[9px] font-bold uppercase tracking-[0.17em]" style={{ color: '#B8912E' }}>
              Algebra I placement diagnostic
            </span>
          </span>
        </Link>

        <Link
          href="/online-algebra-1-tutoring"
          className="inline-flex flex-shrink-0 items-center gap-1.5 text-xs font-bold hover:opacity-75"
          style={{ color: '#731F32' }}
        >
          <ArrowLeft className="h-4 w-4" />
          <span className="hidden sm:inline">Back to Algebra I</span>
          <span className="sm:hidden">Back</span>
        </Link>
      </div>
    </header>
  );
}