/* eslint-disable @next/next/no-img-element */
"use client";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { AlignJustify } from "lucide-react";
import Link from "next/link";

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

const Header = () => {
  return (
    <header className="flex items-center justify-between w-full h-28 bg-blue-900 mb-4">
      <div className="ps-4">
        <Sheet>
          <SheetTrigger>
            {" "}
            <AlignJustify />
          </SheetTrigger>
          <SheetContent side="left">
            <SheetHeader className="mb-9 gap-1">
              <Avatar className="flex items-center justify-center m-auto mb-4 mt-9 w-24 h-24">
                <AvatarImage src="logoprefeitura.png" alt="@shadcn" />
                <AvatarFallback>CN</AvatarFallback>
              </Avatar>

              <Command>
                <CommandInput placeholder="Type a command or search..." />
                <CommandList>
                  <CommandEmpty>No results found.</CommandEmpty>
                  <CommandGroup heading="Menu Basico">
                    <CommandItem>
                      <SheetClose asChild>
                        <Link href="/">Processo</Link>
                      </SheetClose>
                    </CommandItem>
                  </CommandGroup>

                  <CommandSeparator />
                </CommandList>
              </Command>
            </SheetHeader>
          </SheetContent>
        </Sheet>
      </div>

      <div>Relação de Fiscais e Contratos</div>
      <div className="pe-4">
        <img
          src="logoprefeitura.png"
          alt="logo"
          className="w-14 h-14  rounded-full"
        />
      </div>
    </header>
  );
};

export default Header;