"use client"; import { useEffect, useState } from "react"; import { Spinner } from "../UI"; import { CarImageGallery } from "./CarImageGallery"; import { useCarDetail } from "@/src/hooks/useCars"; import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "@/src/types/car"; import type { Car, InsuranceStatus } from "@/src/types/car"; // ── Props ───────────────────────────────────────────────────────────────────── interface CarDetailPanelProps { carId: string; onClose: () => void; onEdit: (car: Car) => void; onDelete: (car: Car) => void; } // ── Row component ───────────────────────────────────────────────────────────── function DetailRow({ label, value, mono = false, warn = false }: { label: string; value: string; mono?: boolean; warn?: boolean; }) { return (
{label} {warn && value !== "—" ? "⚠ " : ""}{value}
); } // ── Component ───────────────────────────────────────────────────────────────── export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPanelProps) { const { car, loading, error } = useCarDetail(carId); const [gallery, setGallery] = useState(false); useEffect(() => { const h = (e: KeyboardEvent) => { if (e.key === "Escape" && !gallery) onClose(); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [gallery, onClose]); return ( <> {/* Backdrop */}
{/* Panel */} {gallery && car && ( setGallery(false)} /> )} ); }