import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import type { LatestVideo } from "@/lib/video/video-platforms";
import { ExternalLink, PlaySquare } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export function LatestCard({
	title,
	videos,
}: {
	title: string;
	videos: LatestVideo[];
}) {
	return (
		<Card>
			<CardHeader>
				<CardTitle>{title}</CardTitle>
				<CardDescription>Most recent 10 published videos.</CardDescription>
			</CardHeader>
			<CardContent className="grid gap-3">
				{videos.length === 0 ? (
					<p className="text-sm text-muted-foreground">
						Connect the platform API to load videos.
					</p>
				) : (
					videos.map((video) => (
						<Link
							key={video.id}
							href={video.url}
							target="_blank"
							className="group flex gap-3 border p-2 transition-colors hover:border-primary/60"
						>
							<div className="relative aspect-square w-28 shrink-0 overflow-hidden bg-muted">
								{video.thumbnailUrl ? (
									<Image
										src={video.thumbnailUrl}
										alt=""
										fill
										sizes="112px"
										unoptimized
										referrerPolicy="no-referrer"
										className="object-cover"
									/>
								) : (
									<PlaySquare className="absolute inset-0 m-auto text-muted-foreground" />
								)}
							</div>
							<span className="line-clamp-4 min-w-0 break-words text-sm font-medium leading-snug group-hover:underline">
								{video.title}
							</span>
							<ExternalLink className="mt-0.5 shrink-0 text-muted-foreground" />
						</Link>
					))
				)}
			</CardContent>
		</Card>
	);
}