import type { ReactNode } from 'react';
import { cn } from '../utils/cn';
export interface MultiImageGridItem {
/** Backend image URL — null/undefined renders default car placeholder */
url?: string | null;
/** Alt text for accessibility */
alt?: string;
/** Optional badge content rendered top-right (e.g. damage count) */
badge?: ReactNode;
/** Optional label rendered bottom (e.g. "Ön sol") */
label?: string;
}
interface Props {
items: MultiImageGridItem[];
className?: string;
/** Click handler — called with item index */
onItemClick?: (index: number) => void;
/**
* Intrinsic image dimensions hinted to the browser to reserve space
* and prevent CLS — actual rendered size still follows the aspect ratio.
* Defaults to 400x300 (4:3).
*/
intrinsicWidth?: number;
intrinsicHeight?: number;
/** Aspect ratio class — defaults to 4:3 (matches default intrinsic dims) */
aspectRatioClass?: string;
}
/**
* Responsive multi-image thumbnail grid (spec-aligned).
*
* - 3 columns on mobile, 4 on sm (≥640px), 6 on lg (≥1024px)
* - Fixed aspect ratio per cell (no layout shift)
* - Every ![]()
receives explicit width/height attributes so the browser can
* reserve space even without next/image — usable in Tauri/RN-web shells.
* - Falls back to inline car SVG when a URL is missing.
*/
export function MultiImageGrid({
items,
className,
onItemClick,
intrinsicWidth = 400,
intrinsicHeight = 300,
aspectRatioClass = 'aspect-[4/3]',
}: Props) {
if (!items || items.length === 0) return null;
return (
{items.map((item, i) => {
const interactive = !!onItemClick;
const hasUrl = !!item.url;
const alt = item.alt ?? `Fotoğraf ${i + 1}`;
const cell = (
<>
{hasUrl ? (
) : (
)}
{item.badge && (
{item.badge}
)}
{item.label}
)}
);
return (
-
{interactive ? (
) : (
{cell}
)}
);
})}
);
}
function DefaultCarPlaceholder({ index }: { index: number }) {
return (
);
}