import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Plus } from "@mynaui/icons-react";

export function AddButton() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="icon">
          <Plus className="size-5" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 p-5">
        <div className="space-y-4">
          <div>
            <h3 className="font-medium">Add Book</h3>
            <p className="text-muted-foreground">
              Fill out the form to add a new book.
            </p>
          </div>
          <form className="space-y-4">
            <div className="space-y-1">
              <Label htmlFor="title">Title</Label>
              <Input id="title" placeholder="Enter book title" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="author">Author</Label>
              <Input id="author" placeholder="Enter author name" />
            </div>
            <Button type="submit" size="sm">
              Add Book
            </Button>
          </form>
        </div>
      </PopoverContent>
    </Popover>
  );
}