"use client";

import { useState, ReactNode } from "react";
import { Box, Tabs, Tab } from "@mui/material";
import { useTranslation } from "react-i18next";

interface TabPanelProps {
  children?: ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`qr-code-handle-tabpanel-${index}`}
      aria-labelledby={`qr-code-handle-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
    </div>
  );
}

interface QrCodeHandleTabsProps {
  userTabContent: ReactNode;
  equipmentTabContent: ReactNode;
}

const QrCodeHandleTabs: React.FC<QrCodeHandleTabsProps> = ({
  userTabContent,
  equipmentTabContent,
}) => {
  const { t } = useTranslation("common");
  const { t: tUser } = useTranslation("user");
  const [currentTab, setCurrentTab] = useState(0);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setCurrentTab(newValue);
  };

  return (
    <Box sx={{ width: "100%" }}>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs value={currentTab} onChange={handleTabChange}>
          <Tab label={tUser("User")} />
          <Tab label={t("Equipment")} />
        </Tabs>
      </Box>

      <TabPanel value={currentTab} index={0}>
        {userTabContent}
      </TabPanel>

      <TabPanel value={currentTab} index={1}>
        {equipmentTabContent}
      </TabPanel>
    </Box>
  );
};

export default QrCodeHandleTabs;