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

type InfoBarprops = {
  obj: SightingWidgetType | SightingType;
};
const InfoBar = ({ obj }: InfoBarprops) => {
  const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
  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">
          {obj ? formatAge(obj.timeStampMillis) : "—"}
        </div>
      </div>

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

export default InfoBar;