import { type FC } from 'react';

import { times } from 'lodash-es';
import Stack from '@material-hu/mui/Stack';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

const AgentsTableSkeleton: FC = () => {
  return (
    <HuTableContainer>
      <HuTable
        sx={{
          minWidth: 650,
        }}
      >
        <HuTableHead>
          <HuTableRow headerRow>
            <HuTableCell>
              <HuSkeleton
                width={80}
                height={32}
              />
            </HuTableCell>
            <HuTableCell>
              <HuSkeleton
                width={80}
                height={32}
              />
            </HuTableCell>
            <HuTableCell />
          </HuTableRow>
        </HuTableHead>
        <HuTableBody>
          {times(5).map((_, idx) => {
            return (
              <HuTableRow key={idx}>
                <HuTableCell sx={{ width: '500px' }}>
                  <Stack
                    sx={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'flex-start',
                      gap: 1,
                    }}
                  >
                    <HuSkeleton
                      variant="circular"
                      height={40}
                      width={40}
                    />
                    <Stack sx={{ gap: 0.5 }}>
                      <HuSkeleton
                        variant="rounded"
                        height={24}
                        width={139}
                      />
                      <HuSkeleton
                        variant="rounded"
                        height={12}
                        width={162}
                      />
                    </Stack>
                  </Stack>
                </HuTableCell>
                <HuTableCell>
                  <HuSkeleton
                    width={80}
                    height={32}
                  />
                </HuTableCell>
                <HuTableCell sx={{ width: '72px' }}>
                  <HuSkeleton
                    width={24}
                    height={32}
                  />
                </HuTableCell>
              </HuTableRow>
            );
          })}
        </HuTableBody>
      </HuTable>
    </HuTableContainer>
  );
};
export default AgentsTableSkeleton;