import { ProfileHeader } from "@/components/common/profileheader";
import { Header1 } from "@/components/SellerTools/styles";
import { Box, Grid, Tab, Tabs } from "@mui/material";
import React from "react";
import { OuterContainer } from "./commonStyles";

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

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

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

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

export default function BrandDetail() {
  const [value, setValue] = React.useState(0);
  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };
  return (
    <>
      <div className="full_page">
        <Box>
          <Header1>
            <ProfileHeader text={"Brand Detail"} />
          </Header1>
        </Box>
        <Grid container spacing={3} className="company_detail_service">
          <Grid item xs={12}>
            <OuterContainer style={{ width: "100%" }}>
              <Box>
                <Box sx={{ width: "100%" }}>
                  <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                    <Tabs
                      value={value}
                      onChange={handleChange}
                      aria-label="basic tabs example"
                    >
                      <Tab label="Product Application" {...a11yProps(0)} />
                      <Tab label="Product Use Cases" {...a11yProps(1)} />
                      <Tab label="Keywords" {...a11yProps(2)} />
                      <Tab label="Product" {...a11yProps(3)} />
                    </Tabs>
                  </Box>
                  <CustomTabPanel value={value} index={0}>
                    Item One
                  </CustomTabPanel>
                  <CustomTabPanel value={value} index={1}>
                    Item Two
                  </CustomTabPanel>
                  <CustomTabPanel value={value} index={2}>
                    Item Three
                  </CustomTabPanel>
                  <CustomTabPanel value={value} index={3}>
                    Item Four
                  </CustomTabPanel>
                </Box>
              </Box>
            </OuterContainer>
          </Grid>
        </Grid>
      </div>
    </>
  );
}