import React from "react";
import type { ComponentProps } from "react";
import { Content, Flex, Glimmer } from "@jobber/components-native";

type GlimmerProps = ComponentProps<typeof Glimmer>;

export function GlimmerInDepth(props: Partial<GlimmerProps>) {
  return (
    <Content spacing="none">
      <Flex template={["shrink", "grow"]}>
        <Glimmer size="larger" shape="circle" {...props} />
        <Content spacing="none" childSpacing="small">
          <Glimmer size="large" width="30%" />
          <Glimmer size="small" width="40%" />
        </Content>
      </Flex>

      <Content spacing="none" childSpacing="small">
        <Glimmer size="small" width="80%" />
        <Glimmer size="small" />
        <Glimmer size="small" width="70%" />
      </Content>

      <Flex template={["shrink", "shrink", "shrink", "shrink"]}>
        <Glimmer size="largest" shape="square" />
        <Glimmer size="largest" shape="square" />
        <Glimmer size="largest" shape="square" />
        <Glimmer size="largest" shape="square" />
      </Flex>
    </Content>
  );
}