"use client";

import Link from "next/link";
import { LuFileText, LuChevronLeft, LuSettings } from "react-icons/lu";
import { UserNav } from "../../dashboard/components/UserNav";
import { useFieldsConfig } from "../components/FieldsConfigContext";

export default function ScannerHeader() {
  const { openModal } = useFieldsConfig();

  return (
    <header className="sticky top-0 z-40 w-full border-b border-border bg-background">
      <div className="container mx-auto flex h-16 items-center justify-between px-4 sm:px-8">
        <div className="flex items-center gap-4">
          <Link
            href="/dashboard"
            className="flex items-center gap-1 text-sm text-text-muted hover:text-text"
          >
            <LuChevronLeft className="h-4 w-4" />
            dashboard
          </Link>
          <span className="h-6 w-px bg-border-subtle"></span>
          <div className="flex items-center gap-2">
            <div className="p-2 bg-primary rounded-lg">
              <LuFileText className="h-5 w-5 text-primary-foreground" />
            </div>
            <span className="text-lg font-bold text-text">OCR Pro</span>
          </div>
        </div>

        <div className="flex items-center gap-4">
          <button
            onClick={openModal}
            className="cursor-pointer flex items-center gap-2 text-sm font-medium text-text-muted hover:text-text"
          >
            <LuSettings className="h-4 w-4" />
            Configurar Campos
          </button>
          <UserNav />
        </div>
      </div>
    </header>
  );
}