fp/services/next/app/components/vod-card.tsx

import Link from "next/link";
import { getSafeDate } from '@/app/lib/dates';
import { IVtuber } from '@futureporn/types';
import Image from "next/legacy/image"
import { LocalizedDate } from '@/app/components/localized-date'
import Skeleton from "react-loading-skeleton";

interface IVodCardProps {
    id: number;
    title: string;
    date: string;
    muxAsset: string | undefined;
    thumbnail: string | undefined;
    vtuber: IVtuber;
}


export default function VodCard({id, title, date, muxAsset, thumbnail = 'https://futureporn-b2.b-cdn.net/default-thumbnail.webp', vtuber}: IVodCardProps) {

    if (!vtuber?.slug) return <div className="card mb-3 mr-5"><p>VOD {id} is missing VTuber.slug~</p></div>


    return (
        <div key={id} className="column is-full-mobile is-one-third-tablet is-one-fourth-desktop is-one-fifth-fullhd">
            <div className="card">
                <Link href={`/vt/${vtuber.slug}/vod/${getSafeDate(date)}`}>
                    <div className="card-image">
                        {thumbnail && 
                            <figure className="image is-16by9">
                                <Image
                                    src={thumbnail}
                                    alt={title}
                                    placeholder="blur"
                                    blurDataURL={vtuber?.image_blur || 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAADUlEQVQImWOIUT7wHwAEXQI/2aBnMAAAAABJRU5ErkJggg=='}
                                    layout="fill"
                                    style={{
                                        objectFit: 'cover',
                                    }}
                                />
                            </figure>
                        }
                        {!thumbnail && <p>missing thumbnail</p>}
                    </div>
                    <div className="card-content">
                        <p className="subtitle">{vtuber.display_name}</p>
                        <LocalizedDate date={new Date(date)} />
                        <p className="">{title}</p>
                    </div>
                </Link>
            </div>
        </div>

    )
  }