rhl-lieferscheine/components/overview/OverviewCard.jsx

"use client";

import Link from "next/link";

import { cn } from "@/lib/utils";
import {
	Card,
	CardContent,
	CardDescription,
	CardTitle,
} from "@/components/ui/card";

export default function OverviewCard({
	title,
	description,
	imageSrc,
	href = null,
	disabledHint = null,
	containerClassName = "",
}) {
	const isDisabled = !href;

	const card = (
		<Card
			className={[
				"h-[420px] w-full overflow-hidden gap-0 py-0 border",
				"bg-card/90",
				"transition-all duration-200",
				isDisabled
					? "opacity-85"
					: "group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:border-primary/30 group-active:translate-y-0",
			].join(" ")}
		>
			<div className="h-56 w-full overflow-hidden border-b bg-muted/30">
				<img
					src={imageSrc}
					alt={`${title} Karte`}
					className="h-full w-full object-cover"
					loading="lazy"
				/>
			</div>

			<CardContent className="flex flex-1 flex-col space-y-2 px-4 py-3">
				<CardTitle className="text-base">{title}</CardTitle>
				<CardDescription className="text-sm leading-relaxed">
					{description}
				</CardDescription>
				{isDisabled && disabledHint ? (
					<p className="mt-auto text-xs text-muted-foreground">
						{disabledHint}
					</p>
				) : null}
			</CardContent>
		</Card>
	);

	if (isDisabled) {
		return (
			<div
				className={cn("group block w-full", containerClassName)}
				aria-disabled="true"
			>
				{card}
			</div>
		);
	}

	return (
		<Link
			href={href}
			className={cn(
				"group block w-full rounded-xl focus:outline-none",
				containerClassName,
			)}
		>
			{card}
		</Link>
	);
}