import { Link } from "@tanstack/react-router";

type MovieCardProps = {
	id: string;
	imageUrl?: string;
	title: string;
	description: string | number;
};

export default function MovieCard({
	id,
	title,
	imageUrl,
	description,
}: MovieCardProps) {
	return (
		<div className="flex h-full min-w-36 max-w-36 flex-1 flex-col gap-2 rounded-lg p-0 transition-transform duration-200 hover:scale-105 hover:shadow-lg md:min-w-48 md:max-w-48 md:p-2">
			<Link to="/home/details/$id" params={{ id }}>
				<div className="relative aspect-[3/4] w-full overflow-hidden rounded-lg bg-center bg-cover bg-no-repeat">
					<img
						src={
							imageUrl && imageUrl.length > 10
								? imageUrl
								: "/movie-placeholder.svg"
						}
						alt={title}
						className="rounded-sm"
					/>
					<div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/70 to-transparent p-2 md:hidden">
						<p className="truncate text-foreground text-xs leading-normal">
							{title}
						</p>
					</div>
				</div>
			</Link>
			<div className="hidden md:flex md:flex-col md:gap-1">
				<p className="truncate px-1 text-center text-foreground text-sm leading-normal md:text-base">
					{title}
				</p>
				<div className="flex items-center justify-center px-1 text-muted-foreground text-xs">
					<span className="text-center">{description}</span>
				</div>
			</div>
		</div>
	);
}
