ERitors-Scribe-Desktop/components/series/SeriesCard.tsx

'use client';
import React, {useState} from "react";
import {Layers, Settings} from 'lucide-react';
import IconButton from "@/components/ui/IconButton";
import {BookProps} from "@/lib/types/book";
import BookCard from "@/components/book/BookCard";
import Badge from "@/components/ui/Badge";
import {useTranslations} from '@/lib/i18n';

export interface SeriesCardProps {
    id: string;
    name: string;
    coverImage: string | null;
    books: BookProps[];
}

interface SeriesCardComponentProps {
    series: SeriesCardProps;
    onBookClick: (bookId: string) => void;
    onSettingsClick: (seriesId: string) => void;
}

export default function SeriesCard({series, onBookClick, onSettingsClick}: SeriesCardComponentProps) {
    const t = useTranslations();
    const [isExpanded, setIsExpanded] = useState<boolean>(false);

    return (
        <div className="flex flex-shrink-0 p-2">
            <div
                onClick={() => setIsExpanded(!isExpanded)}
                className={`group relative aspect-[2/3] overflow-hidden cursor-pointer transition-all duration-300 hover:ring-1 hover:ring-text-primary/20 flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 ${isExpanded ? 'rounded-l-xl' : 'rounded-xl'}`}
            >
                {series.coverImage ? (
                    <img
                        src={series.coverImage}
                        alt={series.name}
                        className="w-full h-full object-cover"
                    />
                ) : (
                    <div className="w-full h-full bg-secondary flex items-center justify-center">
                        <Layers className="text-muted w-12 h-12" strokeWidth={1.75}/>
                    </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">
                        {series.name}
                    </h3>
                    <p className="text-text-secondary text-xs mt-0.5">
                        {series.books.length} {series.books.length > 1 ? t("seriesCard.books") : t("seriesCard.book")}
                    </p>
                </div>
                
                <Badge size="sm" floating>
                    {series.books.length}
                </Badge>
            </div>

            {isExpanded && (
                <>
                    <div className="flex items-center border-y border-secondary bg-tertiary">
                        {series.books.map((book: BookProps, idx: number) => (
                            <div key={book.bookId} className="flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2">
                                <BookCard
                                    book={book}
                                    onClickCallback={onBookClick}
                                    index={idx}
                                />
                            </div>
                        ))}

                        <div className="flex items-center px-4 flex-shrink-0">
                            <IconButton icon={Settings} variant="ghost" size="lg" shape="square"
                                        tooltip={t("seriesCard.settings")}
                                        onClick={(): void => onSettingsClick(series.id)}/>
                        </div>
                    </div>
                    
                    <div
                        className="w-3 border-y border-r border-secondary rounded-r-xl bg-tertiary flex-shrink-0"></div>
                </>
            )}
        </div>
    );
}