"use client"; // Components/Car/CarDetailPanel.tsx // Slide-in panel showing full car details with action buttons. import { useEffect, useState } from "react"; import { Spinner } from "../UI"; import { CarImageGallery } from "./CarImageGallery"; import { useCarDetail } from "../../hooks/useCars"; import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "../../types/car"; import type { Car, InsuranceStatus } from "../../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)} /> )} ); }