import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";

const TeamHeadToHeadSkeleton = () => {
  return (
    <Stack gap="md">
      <Paper p="md" withBorder radius="md">
        <Stack gap="sm">
          <Group justify="center" gap="xs">
            <Skeleton height={28} width={140} />
            <Skeleton height={20} width={20} />
            <Skeleton height={28} width={140} />
          </Group>

          <Group justify="center" gap="lg">
            <Stack gap={0} align="center">
              <Skeleton height={32} width={40} />
              <Skeleton height={16} width={100} mt={4} />
            </Stack>
            <Skeleton height={24} width={10} />
            <Stack gap={0} align="center">
              <Skeleton height={32} width={40} />
              <Skeleton height={16} width={100} mt={4} />
            </Stack>
          </Group>

          <Group justify="center">
            <Skeleton height={16} width={150} />
          </Group>
        </Stack>
      </Paper>

      <Stack gap={0}>
        <Skeleton height={18} width={130} ml="md" mb="xs" />

        <Paper withBorder>
          <Stack gap={0}>
            <Group justify="space-between" px="md" py="sm">
              <Skeleton height={20} width={60} />
              <Skeleton height={16} width={80} />
              <Skeleton height={20} width={60} />
            </Group>
            <Divider />

            <Group justify="space-between" px="md" py="sm">
              <Skeleton height={20} width={60} />
              <Skeleton height={16} width={100} />
              <Skeleton height={20} width={60} />
            </Group>
            <Divider />

            <Group justify="space-between" px="md" py="sm">
              <Skeleton height={20} width={60} />
              <Skeleton height={16} width={110} />
              <Skeleton height={20} width={60} />
            </Group>
          </Stack>
        </Paper>
      </Stack>

      <Stack gap="xs">
        <Skeleton height={18} width={150} ml="md" />
        <Stack gap="sm" p="md">
          <Skeleton height={100} />
          <Skeleton height={100} />
          <Skeleton height={100} />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default TeamHeadToHeadSkeleton;