import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
import type { ZoomLevel } from "../../types/types";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import CameraSettingFields from "./CameraSettingFields";
import { faWrench } from "@fortawesome/free-solid-svg-icons";

const CameraSettings = ({
  title,
  side,
  zoomLevel,
  onZoomLevelChange,
}: {
  title: string;
  side: string;
  zoomLevel?: ZoomLevel;
  onZoomLevelChange?: (level: ZoomLevel) => void;
}) => {
  const { data, isError, isPending, updateCameraConfig } =
    useFetchCameraConfig(side);

  return (
    <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
      {isPending && <>Loading camera config</>}
      {isError && <>Error fetching camera config</>}
      <div className="relative flex flex-col space-y-3">
        <CardHeader title={title} icon={faWrench} />
        <CameraSettingFields
          initialData={data}
          updateCameraConfig={updateCameraConfig}
          zoomLevel={zoomLevel}
          onZoomLevelChange={onZoomLevelChange}
        />
      </div>
    </Card>
  );
};

export default CameraSettings;