import clsx from "clsx";
import StatusIndicators from "./StatusIndicators";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { IconProp } from "@fortawesome/fontawesome-svg-core";

type CameraOverviewHeaderProps = {
  title?: string;
  status?: string;
  refetch?: () => void;
  icon?: IconProp;
};
const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps) => {
  return (
    <div
      className={clsx(
        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between",
      )}
    >
      <div className="flex flex-row items-center w-full justify-between">
        <h2 className="flex flex-row text-xl items-center">
          {status && <StatusIndicators status={status} />}
          {title}
        </h2>
        {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
      </div>
    </div>
  );
};

export default CardHeader;