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

type OSDOptionsCardProps = {
  isOSDLoading: boolean;
};

const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
  return (
    <Card className="p-4 flex-1">
      <CardHeader title="OSD Payload Options" />
      <Tabs>
        <TabList>
          <Tab>OSD Settings</Tab>
          <Tab>payload Settings</Tab>
        </TabList>
        <TabPanel>
          <OSDFields isOSDLoading={isOSDLoading} />
        </TabPanel>
        <TabPanel>
          <div>payload settings</div>
        </TabPanel>
      </Tabs>
    </Card>
  );
};

export default OSDOptionsCard;