import type { Models } from "@nontara/server/models";
import { Card } from "@/components/ui/card";

type EpisodeCardProps = {
	episode: Models.GetSeasonEpisodesOutput["episodes"][number];
};

function formatDuration(seconds: number | null): string {
	if (!seconds) return "N/A";
	const minutes = Math.floor(seconds / 60);
	return `${minutes}m`;
}

export function EpisodeCard({ episode }: EpisodeCardProps) {
	return (
		<Card className="cursor-pointer border-border/50 bg-card/50 backdrop-blur-sm transition-colors hover:bg-card/70">
			<div className="flex gap-4 p-4">
				{/* Episode Number */}
				<div className="flex w-12 flex-shrink-0 items-center justify-center">
					<span className="font-semibold text-2xl text-muted-foreground">
						{episode.episodeNumber}
					</span>
				</div>

				{/* Thumbnail */}
				<div className="flex-shrink-0">
					<img
						src={episode.backgroundUrl ?? "/movie-placeholder.svg"}
						alt={episode.title}
						className="h-20 w-36 rounded object-cover"
					/>
				</div>

				{/* Episode Info */}
				<div className="flex min-w-0 flex-1 flex-col justify-center gap-2">
					<h3 className="font-medium text-base">{episode.title}</h3>
					<p className="line-clamp-2 text-muted-foreground text-sm leading-relaxed">
						{episode.overview || "No description available"}
					</p>
				</div>

				{/* Duration */}
				<div className="flex flex-shrink-0 items-center">
					<span className="text-muted-foreground text-sm">
						{formatDuration(episode.runtimeSeconds)}
					</span>
				</div>
			</div>
		</Card>
	);
}
