import { cn } from '@/lib/utils';

type ImageCardProps = {
    src: string;
    alt: string;
    eyebrow: string;
    title: string;
    description?: string;
    className?: string;
};

/**
 * Photo card with a caption over a dark scrim. The scrim stays dark in both
 * themes because the photography itself is dark.
 */
export default function ImageCard({
    src,
    alt,
    eyebrow,
    title,
    description,
    className,
}: ImageCardProps) {
    return (
        <figure
            className={cn(
                'group relative flex min-h-72 flex-col justify-end overflow-hidden rounded-2xl bg-neutral-900 p-6 shadow-md',
                className,
            )}
        >
            <img
                src={src}
                alt={alt}
                loading="lazy"
                className="absolute inset-0 h-full w-full object-cover brightness-75 transition-transform duration-500 group-hover:scale-105"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
            <figcaption className="relative flex flex-col gap-1">
                <span className="font-mono text-[11px] font-bold tracking-wider text-rose-300 uppercase">
                    {eyebrow}
                </span>
                <span className="font-display text-lg font-bold text-white">
                    {title}
                </span>
                {description && (
                    <span className="text-sm text-neutral-300">
                        {description}
                    </span>
                )}
            </figcaption>
        </figure>
    );
}