ERitors-Scribe-Desktop/components/book/BookCard.tsx

import {Link} from '@/lib/navigation';
import React from "react";
import {BookProps} from "@/lib/types/book";
import DeleteBook from "@/components/book/settings/DeleteBook";
import {useTranslations} from '@/lib/i18n';

export default function BookCard(
    {
        book,
        onClickCallback,
        index
    }: {
        book: BookProps,
        onClickCallback: Function;
        index: number;
    }) {
    const t = useTranslations();

    return (
        <Link href={`/book/${book.bookId}`}>
            <div
                className="group relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:ring-1 hover:ring-text-primary/20">
                {book.coverImage ? (
                    <img
                        src={book.coverImage}
                        alt={book.title || t("bookCard.noCoverAlt")}
                        className="w-full h-full object-cover"
                    />
                ) : (
                    <div className="w-full h-full bg-secondary flex items-center justify-center">
                        <span className="text-muted text-5xl font-['ADLaM_Display']">
                            {book.title.charAt(0).toUpperCase()}
                        </span>
                    </div>
                )}
                
                <div className="absolute inset-x-0 bottom-0 bg-darkest-background/70 p-3">
                    <h3 className="text-text-primary font-bold text-sm truncate">
                        {book.title}
                    </h3>
                    {book.subTitle && (
                        <p className="text-text-secondary text-xs truncate mt-0.5">
                            {book.subTitle}
                        </p>
                    )}
                </div>
                
                <div
                    className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                    onClick={(e: React.MouseEvent): void => e.preventDefault()}
                    {...(index === 0 && {'data-guide': 'bottom-book-card'})}
                >
                    <DeleteBook bookId={book.bookId}/>
                </div>
            </div>
        </Link>
    )
}