Mav-Mobile-UI/src/components/SightingsWidget/SightingWidgetDetails.tsx

import type { SightingType } from "../../types/types";

type SightingWidgetDetailsProps = {
  effectiveSelected: SightingType | null;
};

const SightingWidgetDetails = ({
  effectiveSelected,
}: SightingWidgetDetailsProps) => {
  return (
    <>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
        {effectiveSelected?.vrm && (
          <div>
            VRM:{" "}
            <span className="opacity-90">{effectiveSelected?.vrm ?? "—"}</span>
          </div>
        )}

        {effectiveSelected?.make !== "" && (
          <div>
            Make:{" "}
            <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
          </div>
        )}
        {effectiveSelected?.model.trim() !== "" && (
          <div>
            Model:{" "}
            <span className="opacity-90">
              {effectiveSelected?.model ?? "—"}
            </span>
          </div>
        )}
        {effectiveSelected?.color !== "" && (
          <div>
            Colour:{" "}
            <span className="opacity-90">
              {effectiveSelected?.color ?? "—"}
            </span>
          </div>
        )}
      </div>
    </>
  );
};

export default SightingWidgetDetails;