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

import type { SightingType } from "../../types/types";
import { capitalize, formatAge } from "../../utils/utils";

type InfoBarprops = {
  obj: SightingType;
};
const InfoBar = ({ obj }: InfoBarprops) => {
  const isNPEDHitD = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";

  return (
    <div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
      <div className="flex items-center gap-3 text-xs">
        <div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
        <div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
        <div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>
        <div className="min-w-14 opacity-80 text-md">
          {obj ? formatAge(obj.timeStampMillis) : "—"}
        </div>
      </div>

      <div className="min-w-14 opacity-80 ">
        {isNPEDHitD ? (
          <span className="text-amber-500 font-semibold">NPED HIT CAT D</span>
        ) : (
          ""
        )}
      </div>
    </div>
  );
};

export default InfoBar;