import { createSignal, onMount, For, type Component } from "solid-js";
import AuthorCard from "./AuthorCard";
import BibblanService from "../services/bibblanservice";
import { Author } from "../types/types";

const BookList: Component = () => {
	const [authors, setAuthors] = createSignal<Author[]>([]);
	const [query, setQuery] = createSignal("");

	const update = (query: string) => {
		setQuery(query);
		BibblanService.getAuthors(query).then(setAuthors);
	};

	onMount(() => {
		BibblanService.getAuthors().then(setAuthors);
	});

	return (
		<div>
			<h1>Authors!</h1>
			<input
				type="text"
				class="form-control mb-3"
				placeholder="Search..."
				onInput={(e) => update(e.currentTarget.value)}
			/>
			<div class="book-grid d-flex flex-wrap justify-content-between gap-3 p-3">
				<For each={authors()}>{(item) => <AuthorCard author={item} />}</For>
			</div>
		</div>
	);
};

export default BookList;