import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTrigger,
} from "@/app/_components/ui/sheet";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/app/_components/ui/avatar";
import { AlignJustify } from "lucide-react";
import Link from "next/link";

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/app/_components/ui/command";

import Image from "next/image";

const Header = () => {
  return (
    <div className="flex items-center justify-between px-3 shadow-lg shadow-gray-300">
      <Image src="/logo.png" alt="logo" width={80} height={80} />
      <div>
        <Sheet>
          <SheetTrigger>
            {" "}
            <AlignJustify />
          </SheetTrigger>
          <SheetContent side="right">
            <SheetHeader className="mb-9 gap-1">
              <Avatar className="m-auto mb-4 mt-9 flex h-24 w-24 items-center justify-center">
                <AvatarImage src="logoprefeitura.png" alt="@shadcn" />
                <AvatarFallback>CN</AvatarFallback>
              </Avatar>
              <h1 className="text-center">{"User"}</h1>
              <Command>
                <CommandInput placeholder="Type a command or search..." />
                <CommandList>
                  <CommandEmpty>No results found.</CommandEmpty>
                  <CommandGroup heading="Rainha">
                    <CommandItem>
                      <SheetClose asChild>
                        <Link href="/queen">Cadastro da Rainha</Link>
                      </SheetClose>
                    </CommandItem>

                    <CommandItem>
                      <SheetClose asChild>
                        <Link href="/update">Altear dados Rainha</Link>
                      </SheetClose>
                    </CommandItem>
                  </CommandGroup>

                  <CommandGroup heading="Rainha Mirim">
                    <CommandItem>
                      <SheetClose asChild>
                        <Link href="/mirim">Cadastro da Rainha Mirim</Link>
                      </SheetClose>
                    </CommandItem>

                    <CommandItem>
                      <SheetClose asChild>
                        <Link href="/updatemirim">
                          Altear dados Rainha Mirim
                        </Link>
                      </SheetClose>
                    </CommandItem>
                  </CommandGroup>
                </CommandList>
              </Command>
            </SheetHeader>
          </SheetContent>
        </Sheet>
      </div>
    </div>
  );
};

export default Header;