"use client";

import Link from "next/link";
import { useState } from "react";

const PageCountInput = ({authors, hiveID, title, url }) => {
	const [value, setValue] = useState(0);

	const handleSubmit = async () => {
		try {
			const response = await fetch("/api/books/pageCount", {
				body: JSON.stringify({
                    authors,
					hiveID,
                    title,
					value
				}),
				method: "POST"
			});

			if (response) {
				window.location.reload();
			}
		} catch (error) {}
	};

	return (
		<div className="flex flex-col gap-4">
			<input
				className="border-2 border-emerald-900 h-12 px-4 py-2 rounded-lg text-emerald-900"
				min={0}
				name=""
				onChange={(e) => setValue(Number(e.currentTarget.value))}
				placeholder="Add Page Count"
				step={1}
				type="number"
				value={value}
			/>
			<button
				className="active:bg-emerald-800 bg-emerald-900 hover:cursor-pointer flex items-center justify-center h-12 px-4 py-2 text-amber-100 rounded-lg"
				onClick={handleSubmit}
			>
				Submit
			</button>
			<Link
				className="bg-emerald-900 h-12 px-4 py-2 rounded-lg text-amber-100 text-center"
				href={url}
				target="_blank"
			>
				Goodreads Search Results
			</Link>
		</div>
	);
};

export default PageCountInput;