ClientDetail common

import { Box, Button, Tab, Tabs, Typography } from '@mui/material';
import { GridValidRowModel } from '@mui/x-data-grid';
import { useEffect, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

const ClientDetails = ({
  setClientDetails,
  typeDetails,
  setEdit,
}: {
  setClientDetails: React.Dispatch<React.SetStateAction<boolean>>;
  typeDetails: GridValidRowModel;
  setEdit: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
  const [tab, setTab] = useState(0);
  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setTab(newValue);
  };

  return (
    <>
      <Box display="flex" justifyContent="space-between">
        <Box display="flex" pb={4} alignItems="center">
          <Button sx={{ minWidth: 0, p: 0 }} onClick={() => setClientDetails(false)}>
            <ArrowBackIcon color="disabled" />
          </Button>
          <Typography ml={1} variant="h2">
            {typeDetails.clientName}
          </Typography>
        </Box>
        <Button
          variant="contained"
          color="secondary"
          onClick={() => setEdit(true)}
          sx={{ height: '35px' }}
        >
          Edit
        </Button>
      </Box>
      <Box sx={{ background: 'white' }} display="flex" flexDirection="column">
        <Box sx={{ width: '100%' }}>
          <Box
            sx={{
              borderBottom: 1,
              borderColor: 'divider',
              px: 3,
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Tabs
              variant="scrollable"
              scrollButtons="auto"
              allowScrollButtonsMobile
              aria-label="scrollable auto tabs example"
              value={tab}
              onChange={handleChange}
            >
              <Tab label="1. Details" />
              <Tab label="2. Needs analyses" />
              <Tab label="3. Quotes" />
              <Tab label="4. Reports" />
            </Tabs>
          </Box>
        </Box>
        {tab === 0 && (
          <Box p={4}>
            <Typography sx={{ color: 'text.secondary', mb: 1 }}>SECTION TITLE</Typography>

            <Box
              display="flex"
              sx={{ borderBottom: 1, borderColor: 'divider' }}
              pb={2}
              flexDirection={{ xs: 'column', md: 'row' }}
            >
              <Box mr={5} display="flex" flexDirection="column">
                <Box display="flex">
                  <Typography>Tax status </Typography>
                  <Typography ml={1} fontWeight={800}>
                    {typeDetails.typeNote}
                  </Typography>
                </Box>
                <Box display="flex">
                  <Typography>Registration number</Typography>
                  <Typography ml={1} fontWeight={800}>
                    {typeDetails.idRegNumber}
                  </Typography>
                </Box>
              </Box>
              <Box mr={5} display="flex" flexDirection="column">
                <Box display="flex">
                  <Typography>Vat number</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
                <Box display="flex">
                  <Typography>Tax number</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
              </Box>
              <Box display="flex" flexDirection="column">
                <Box display="flex">
                  <Typography>Valuation</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
                <Box display="flex">
                  <Typography>Loan accounts</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
              </Box>
            </Box>
            <Box mt={4} display="flex" flexDirection={{ xs: 'column', md: 'row' }}>
              <Box width="160px" display="flex" flexDirection="column">
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                  <Typography sx={{ color: 'text.secondary', mb: 1 }}>BASIC</Typography>
                </Box>
                <Box mt={2} display="flex">
                  <Typography>Language</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
                <Box display="flex">
                  <Typography>Date established</Typography>
                  <Typography ml={1} fontWeight={800}>
                    {typeDetails.establishedDOB}
                  </Typography>
                </Box>
              </Box>
              <Box
                width="160px"
                display="flex"
                ml={{ xs: 0, md: 5 }}
                mt={{ xs: 2, md: 0 }}
                flexDirection="column"
              >
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                  <Typography sx={{ color: 'text.secondary', mb: 1 }}>ADDRESSES</Typography>
                </Box>
                <Box display="flex" mt={2}>
                  <Typography>Physical:</Typography>
                  <Typography ml={1}>-</Typography>
                </Box>
                <Box display="flex">
                  <Typography>Postal:</Typography>
                  <Typography ml={1}>-</Typography>
                </Box>
              </Box>
              <Box
                width="160px"
                display="flex"
                ml={{ xs: 0, md: 5 }}
                mt={{ xs: 2, md: 0 }}
                flexDirection="column"
              >
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                  <Typography sx={{ color: 'text.secondary', mb: 1 }}>CONTACT</Typography>
                </Box>
                <Box mt={2} display="flex">
                  <Typography>Contact person</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
                <Box display="flex">
                  <Typography>Phone number</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
                <Box display="flex">
                  <Typography>Email address</Typography>
                  <Typography ml={1} fontWeight={800}>
                    -
                  </Typography>
                </Box>
              </Box>
            </Box>
          </Box>
        )}
      </Box>
    </>
  );
};
export default ClientDetails;