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

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

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

const SightingWidgetDetails = ({
  effectiveSelected,
}: SightingWidgetDetailsProps) => {
  const [advancedDetailsEnabled, setAdvancedDetailsEnabled] = useState(false);

  const handleDetailsClick = () =>
    setAdvancedDetailsEnabled(!advancedDetailsEnabled);

  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>
          Make:{" "}
          <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
        </div>
        <div>
          Model:{" "}
          <span className="opacity-90">{effectiveSelected?.model ?? "—"}</span>
        </div>
        <div>
          Colour:{" "}
          <span className="opacity-90">{effectiveSelected?.color ?? "—"}</span>
        </div>
        <div className="col-span-4">
          Timestamp:{" "}
          <span className="opacity-90">
            {effectiveSelected?.timeStamp ?? "—"}
          </span>
        </div>
        {advancedDetailsEnabled && (
          <>
            <div>
              Country:{" "}
              <span className="opacity-90">
                {effectiveSelected?.countryCode ?? "—"}
              </span>
            </div>
            <div>
              Seen:{" "}
              <span className="opacity-90">
                {effectiveSelected?.seenCount ?? "—"}
              </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>
          </>
        )}
      </div>
      <div className="col-span-half">
        <p
          onClick={handleDetailsClick}
          className="underline text-blue-300 hover:cursor-pointer"
        >
          Sighting Details
        </p>
      </div>
    </>
  );
};

export default SightingWidgetDetails;