import Image from "next/image";
import Link from "next/link";
import type { ReactNode } from "react";

interface SectionCardProps {
	title: string;
	icon?: string;
	actionHref?: string;
	actionLabel?: string;
	children: ReactNode;
	className?: string;
	bodyClassName?: string;
}

/**
 * Consistent, restrained panel used across the home page. Replaces the
 * per-section neon gradients with a single calm surface + hairline divider so
 * the page reads as professional rather than game-like.
 */
export function SectionCard({
	title,
	icon,
	actionHref,
	actionLabel,
	children,
	className,
	bodyClassName,
}: SectionCardProps) {
	return (
		<div
			className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${
				className ?? ""
			}`}
			style={{
				borderColor:
					"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
				boxShadow: "var(--shadow-card)",
			}}
		>
			<div
				className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
				style={{
					borderColor:
						"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
					background:
						"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))",
				}}
			>
				<div className="flex items-center gap-2.5">
					{icon && (
						<Image
							src={icon}
							alt=""
							width={18}
							height={18}
							unoptimized
							className="opacity-90"
						/>
					)}
					<h2
						className="text-sm font-bold tracking-tight"
						style={{
							fontFamily: "var(--font-nunito)",
							color: "var(--color-text-readable)",
						}}
					>
						{title}
					</h2>
				</div>
				{actionHref && actionLabel && (
					<Link
						href={actionHref}
						className="text-xs font-semibold transition-colors hover:text-[var(--color-primary)] hover:underline"
						style={{ color: "var(--color-text-muted)" }}
					>
						{actionLabel}
					</Link>
				)}
			</div>
			<div className={bodyClassName ?? "p-5"}>{children}</div>
		</div>
	);
}