import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import Skeleton from '@material-hu/components/design-system/Skeleton';

const UserStatsDialogSkeleton = () => {
  const theme = useTheme();
  const borderDefault = theme.palette.new.border.neutral.default;

  return (
    <Stack sx={{ gap: 2 }}>
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
        <Skeleton
          variant="circular"
          width={40}
          height={40}
        />
        <Skeleton
          variant="text"
          width={120}
          height={20}
          sx={{ flex: 1 }}
        />
        <Skeleton
          variant="rounded"
          width={80}
          height={24}
          sx={{ borderRadius: 4 }}
        />
        <Stack sx={{ alignItems: 'flex-end', gap: 0.25 }}>
          <Skeleton
            variant="text"
            width={36}
            height={14}
          />
          <Skeleton
            variant="text"
            width={28}
            height={34}
          />
        </Stack>
      </Stack>

      <Divider sx={{ borderColor: borderDefault }} />

      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
        <Stack
          sx={{ flexDirection: 'row', alignItems: 'center', gap: 1, flex: 1 }}
        >
          <Skeleton
            variant="circular"
            width={32}
            height={32}
          />
          <Stack sx={{ flex: 1 }}>
            <Skeleton
              variant="text"
              width={60}
              height={14}
            />
            <Skeleton
              variant="text"
              width={50}
              height={20}
            />
          </Stack>
          <Skeleton
            variant="text"
            width={24}
            height={34}
          />
        </Stack>
        <Divider
          orientation="vertical"
          flexItem
          sx={{ borderColor: borderDefault }}
        />
        <Stack
          sx={{ flexDirection: 'row', alignItems: 'center', gap: 1, flex: 1 }}
        >
          <Skeleton
            variant="circular"
            width={32}
            height={32}
          />
          <Stack sx={{ flex: 1 }}>
            <Skeleton
              variant="text"
              width={60}
              height={14}
            />
            <Skeleton
              variant="text"
              width={50}
              height={20}
            />
          </Stack>
          <Skeleton
            variant="text"
            width={24}
            height={34}
          />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default UserStatsDialogSkeleton;