'use client';

import CourseGridItem, { CourseGridItemProps } from "./courses/CourseGridItem";

type CatalogCourse = CourseGridItemProps & {
	category: string | undefined;
};

// 안정적인 랜덤 이미지를 위해 시드 기반 썸네일 풀 구성
const THUMBS = Array.from({ length: 16 }).map((_, i) => `https://picsum.photos/seed/xrlms-${i}/640/400`);

const CATALOG: CatalogCourse[] = Array.from({ length: 20 }).map((_, i) => ({
	id: `cat-${i + 1}`,
	title:
		i % 5 === 0
			? "방사선 안전"
			: i % 5 === 1
				? "원자재 운전 및 계동"
				: i % 5 === 2
					? "학점과 평가"
					: i % 5 === 3
						? "방사선 불가물"
						: "현장 운전 및 계동",
	category: i % 6 === 0 ? "추천" : undefined,
	meta: "VOD · 총 6강 · 4시간 20분",
	thumbnail: THUMBS[i % THUMBS.length],
	isNew: i % 9 === 0,
}));

export default function MenuPage() {
	return (
		<main className="w-full">
			<div className="flex h-[88px] items-center px-8">
				<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 목록</h1>
			</div>

			<div className="px-8 pb-16 pt-2">
				<p className="mb-4 text-[13px] leading-[1.4] text-[#8c95a1]">총 {CATALOG.length}건</p>
				<ul className="grid grid-cols-2 gap-x-5 gap-y-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
					{CATALOG.map((course) => (
						<CourseGridItem
							key={course.id}
							id={course.id}
							title={course.title}
							category={course.category}
							meta={course.meta}
							thumbnail={course.thumbnail}
							isNew={course.isNew}
						/>
					))}
				</ul>

				{/* pagination */}
				<div className="mt-10 flex items-center justify-center gap-2">
					<button
						type="button"
						className="flex h-8 w-8 items-center justify-center rounded-full text-[#8c95a1] hover:bg-[#f1f3f5]"
						aria-label="이전 페이지"
					>
						&#x2039;
					</button>
					{[1, 2, 3].map((p) => (
						<button
							key={p}
							type="button"
							className={[
								"flex h-8 w-8 items-center justify-center rounded-full text-[13px] leading-[1.4]",
								p === 1 ? "bg-[#1f2b91] text-white" : "text-[#4c5561] hover:bg-[#f1f3f5]",
							].join(" ")}
						>
							{p}
						</button>
					))}
					<button
						type="button"
						className="flex h-8 w-8 items-center justify-center rounded-full text-[#8c95a1] hover:bg-[#f1f3f5]"
						aria-label="다음 페이지"
					>
						&#x203A;
					</button>
				</div>
			</div>
		</main>
	);
}

