import { Show, type Component } from "solid-js";
import { Author } from "../types/types";
import { Card } from "solid-bootstrap";

const AuthorCard: Component<{ author: Author }> = (props: {
	author: Author;
}) => {
	return (
		<Card class="book-card col-lg-2 col-md-3 col-sm-4">
			<div class="card-img-top missing">?</div>
			<div
				class="card-img-top author"
				style={{
					"background-image":
						'url("/api/bibblan/authorcover/' +
						encodeURIComponent(props.author.id) +
						'")',
				}}
			></div>
			<Card.Body>
				<Card.Title>{props.author.name}</Card.Title>
				<Card.Subtitle>
					<a href={`/books/author/${props.author.id}`}>
						{props.author.bookCount} books
					</a>
				</Card.Subtitle>
			</Card.Body>
		</Card>
	);
};

export default AuthorCard;