import type { IconProp } from "@fortawesome/fontawesome-svg-core";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import clsx from "clsx";

type CameraOverviewHeaderProps = {
  title: string;
  icon?: IconProp;
};

const CardHeader = ({ title, icon }: CameraOverviewHeaderProps) => {
  return (
    <div
      className={clsx(
        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative"
      )}
    >
      {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
      <h2 className="text-xl">{title}</h2>
    </div>
  );
};

export default CardHeader;