import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
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 }: { title: string; side: string }) => {
  const { data, isError, isPending, updateCameraConfig } =
    useFetchCameraConfig(side);

  return (
    <Card>
      {isError && <>Cannot Fetch camera config</>}

      {isPending ? (
        <>Loading</>
      ) : (
        <div className="relative flex flex-col space-y-3 h-full">
          <CardHeader title={title} icon={faWrench} />
          <CameraSettingFields
            initialData={data}
            updateCameraConfig={updateCameraConfig}
          />
        </div>
      )}
    </Card>
  );
};

export default CameraSettings;