import { Flex } from "@/components/flex";
import { Skeleton, SkeletonGroup } from "@/components/skeleton";
import { size as sizeSpace } from "@/components/theme/semantic-spacing.stylex";

export function Basic() {
  return (
    <SkeletonGroup>
      <Flex direction="column" gap="2xl">
        <Flex align="center" gap="xl">
          <Skeleton variant="circle" size="md" />
          <Flex direction="column" gap="md">
            <Skeleton
              variant="rectangle"
              height={sizeSpace["2xl"]}
              width="80px"
            />
            <Skeleton variant="rectangle" height={sizeSpace.md} width="120px" />
          </Flex>
        </Flex>
        <Flex direction="column" gap="md">
          <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" />
          <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" />
          <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" />
          <Skeleton variant="rectangle" height={sizeSpace.md} width="120px" />
        </Flex>
      </Flex>
    </SkeletonGroup>
  );
}