'use client';

import Image from "next/image";

export type CourseGridItemProps = {
	id: string;
	thumbnail: string;
	title: string;
	isNew?: boolean;
	category?: string; // ex) 안전, 공정 등
	meta?: string; // ex) "VOD · 총 6강 · 4시간 20분"
};

export default function CourseGridItem({
	id,
	thumbnail,
	title,
	isNew,
	category,
	meta,
}: CourseGridItemProps) {
	return (
		<li
			key={id}
			className="flex w-full cursor-pointer flex-col gap-2"
		>
			<div className="relative aspect-[16/10] w-full overflow-hidden rounded-lg border border-[#ecf0ff] bg-[#f9fafb]">
				<Image
					src={thumbnail}
					alt=""
					fill
					sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 240px"
					className="object-cover"
					priority={false}
				/>
			</div>
			<div className="flex flex-col">
				<div className="flex items-center gap-2">
					{category ? (
						<span className="rounded bg-[#e5f5ec] px-1.5 py-0.5 text-[12px] font-semibold leading-[1.4] text-[#0c9d61]">
							{category}
						</span>
					) : null}
					{isNew ? (
						<span className="rounded bg-[#ecf0ff] px-1.5 py-0.5 text-[12px] font-semibold leading-[1.4] text-[#1f2b91]">
							NEW
						</span>
					) : null}
				</div>
				<h3 className="mt-1 line-clamp-1 text-[14px] font-semibold leading-[1.5] text-[#333c47]">
					{title}
				</h3>
				{meta ? (
					<p className="mt-0.5 text-[12px] leading-[1.4] text-[#8c95a1]">{meta}</p>
				) : null}
			</div>
		</li>
	);
}


