import Link from 'next/link';
import Image from 'next/image';
import type { GameListItem } from '@/types/response/store/game';

function formatDate(iso: string): string
{
	const d = new Date(iso);
	if (Number.isNaN(d.getTime())) {
		return '';
	}
	return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
}

export default function GameCard({ game }: { game: GameListItem })
{
	return (
		<Link
			href={`/games/${game.id}`}
			className="group flex flex-col overflow-hidden rounded-xl border border-[var(--border-default)] bg-[var(--bg-elevated)] transition hover:shadow-md"
		>
			<div className="relative aspect-square w-full overflow-hidden bg-[var(--bg-elevated)]">
				{game.thumbnail ? (
					<Image
						src={game.thumbnail}
						alt={game.korName}
						fill
						unoptimized
						sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 20vw"
						className="object-cover transition group-hover:scale-105"
					/>
				) : (
					<span className="flex size-full items-center justify-center text-3xl font-bold text-[var(--text-secondary)]">
						{game.korName.charAt(0)}
					</span>
				)}
			</div>
			<div className="flex flex-col gap-0.5 p-3">
				<h3 className="line-clamp-1 font-semibold">{game.korName}</h3>
				{game.engName && <p className="line-clamp-1 text-xs text-[var(--text-secondary)]">{game.engName}</p>}
				<p className="mt-1 text-[11px] text-[var(--text-muted)]">{formatDate(game.createdAt)} 등록</p>
			</div>
		</Link>
	);
}