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

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

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

const SightingWidgetDetails = ({
  effectiveSelected,
}: SightingWidgetDetailsProps) => {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
      <div>
        VRM:{" "}
        <span className="opacity-90">{effectiveSelected?.vrm ?? "—"}</span>
      </div>
      <div>
        Timestamp:{" "}
        <span className="opacity-90">{effectiveSelected?.timeStamp ?? "—"}</span>
      </div>
      <div>
        Make:{" "}
        <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
      </div>
      <div>
        Model:{" "}
        <span className="opacity-90">{effectiveSelected?.model ?? "—"}</span>
      </div>
      <div>
        Country:{" "}
        <span className="opacity-90">{effectiveSelected?.countryCode ?? "—"}</span>
      </div>
      <div>
        Seen:{" "}
        <span className="opacity-90">
          {effectiveSelected?.seenCount ?? "—"}
        </span>
      </div>
      <div>
        Colour:{" "}
        <span className="opacity-90">{effectiveSelected?.color ?? "—"}</span>
      </div>
      <div>
        Category:{" "}
        <span className="opacity-90">{effectiveSelected?.category ?? "—"}</span>
      </div>
      <div>
        Char Ht:{" "}
        <span className="opacity-90">
          {effectiveSelected?.charHeight ?? "—"}
        </span>
      </div>
      <div>
        Plate Size:{" "}
        <span className="opacity-90">
          {effectiveSelected?.plateSize ?? "—"}
        </span>
      </div>
      <div>
        Overview Size:{" "}
        <span className="opacity-90">
          {effectiveSelected?.overviewSize ?? "—"}
        </span>
      </div>
      {effectiveSelected?.detailsUrl ? (
        <div className="col-span-half">
          <a
            href={effectiveSelected.detailsUrl}
            target="_blank"
            className="underline text-blue-300"
          >
            Sighting Details
          </a>
        </div>
      ) : null}
    </div>
  );
};

export default SightingWidgetDetails;