import { Plus } from "lucide-react"
import Link from "next/link"

import { Button } from "../ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu"
import ResetButton from "./resetButton"

const items = [
  {
    name: "Category",
    href: "/inventory/categories/new",
  },
  {
    name: "Item",
    href: "/inventory/items/new",
  },
  {
    name: "Asset",
    href: "/inventory/assets/new",
  },
  {
    name: "Recipient",
    href: "/recipients/new",
  },
  {
    name: "Assignment",
    href: "/assignments/new",
  },
]

export default function AddMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button type="button" className="btn btn-primary">
          <Plus />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem asChild>
          <Link
            href="/import"
            className="flex cursor-pointer items-center gap-2"
            passHref
          >
            <Plus /> Import
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        {items.map((item) => (
          <DropdownMenuItem key={item.name} asChild>
            <Link
              href={item.href}
              className="flex cursor-pointer items-center gap-2"
              passHref
            >
              <Plus /> {item.name}
            </Link>
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <ResetButton />
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
