import type { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import clsx from "clsx";
import NumberPlate from "../PlateStack/NumberPlate";
import type { SightingType } from "../../types/types";

type CameraOverviewHeaderProps = {
  title: string;
  icon?: IconProp;
  img?: string;
  sighting?: SightingType | null;
};

const CardHeader = ({
  title,
  icon,
  img,
  sighting,
}: CameraOverviewHeaderProps) => {
  // console.log(sighting?.debug.toLowerCase());
  return (
    <div
      className={clsx(
        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative justify-between"
      )}
    >
      <div className="flex items-center space-x-2">
        {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
        <h2 className="text-xl">{title}</h2>
      </div>
      {img && (
        <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />
      )}
      {sighting?.vrm && <NumberPlate vrm={sighting.vrm} motion={false} />}
    </div>
  );
};

export default CardHeader;