"use client"

import { useRouterNavigation } from "@/hooks/useRouterNavigation";
import { useTranslation } from "@/hooks/useTranslation";
import { PostModel } from "@/models";
import { withSlug } from "@/utils/slug";

type NovelListProps = {
    novel: PostModel;
};

export default function NovelCard({ novel }: NovelListProps) {
    const { navigate } = useRouterNavigation();
    const { t } = useTranslation();

    return (
        <div
            key={novel.id}
            onClick={() => navigate(`/novel/${withSlug(novel.id, novel.slug)}`)}
            className="flex flex-wrap justify-center gap-6 p-5 bg-white border border-black/20
                       rounded-xl cursor-pointer hover:-translate-y-1
                       transition"
        >
            <div className="w-36 h-48 flex shrink-0 overflow-hidden rounded-xl md:w-28 md:h-40">
                <img
                    src={novel.image ?? "/placeholder-image.png"}
                    alt={novel.title}
                    className="w-full h-full object-cover"
                />
            </div>

            <div className="flex flex-col flex-1 justify-between min-w-37.5">
                <div className="flex flex-col gap-3 pb-2">
                    <h3 className="text-xl font-semibold line-clamp-2">
                        {novel.title ?? "Judul tidak tersedia"}
                    </h3>

                    <p className="text-sm text-gray-500 capitalize">
                        {novel.genre?.title ?? "-"} • {novel.author?.name ?? "-"}
                    </p>

                    {novel.tags && novel.tags.length > 0 && (
                        <div className="flex flex-wrap gap-2 mt-1">
                            {novel.tags.map(tag => (
                                <span
                                    key={tag.id ?? tag.title}
                                    className="text-xs text-primary-600 bg-[#E5FBDE] rounded-md px-2 py-1"
                                >
                                    {tag.title}
                                </span>
                            ))}
                        </div>
                    )}
                </div>

                <div className="flex items-center gap-2 mt-3 text-sm text-gray-400 border-t border-gray-200 pt-2 capitalize md:pt-2 md:text-xs">
                    <span>{novel.total_viewers ?? 0} views</span>
                    <span>•</span>
                    <span>{novel.is_finish ? t('finished') : t('daily update')}</span>
                </div>
            </div>
        </div>
    )
}