import Card from "../../../../ui/Card";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import CameraPanel from "./CameraPanel";

type CameraSettingsProps = {
  setTabIndex: (tabIndex: number) => void;
  tabIndex: number;
};

const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
  return (
    <Card className="p-4 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
        onSelect={(index) => setTabIndex(index)}
      >
        <TabList>
          <Tab>Camera A</Tab>
          <Tab>Camera B</Tab>
          <Tab>Camera C</Tab>
        </TabList>
        <TabPanel>
          <CameraPanel tabIndex={tabIndex} />
        </TabPanel>
        <TabPanel>
          <CameraPanel tabIndex={tabIndex} />
        </TabPanel>
        <TabPanel>
          <CameraPanel tabIndex={tabIndex} />
        </TabPanel>
      </Tabs>
    </Card>
  );
};

export default CameraSettings;