#Spacing

---
import { css } from "@pindoba/styled-system/css";

const containerStyle = css({
  display: "flex",
  flexDirection: "column",
  gap: "md",
});

const sectionStyle = css.raw({
  backgroundColor: "neutral.surface",
  borderRadius: "lg",
  padding: "lg",
  border: "1px solid",
  borderColor: "neutral.border.muted",
});

const sectionTitleStyle = css.raw({
  fontSize: "md",
  fontWeight: "bold",
  marginBottom: "md",
  color: "neutral.text.bold",
});

const subsectionTitleStyle = css.raw({
  fontSize: "sm",
  fontWeight: "medium",
  marginBottom: "sm",
  color: "neutral.text.bold",
});

const tokenContainerStyle = css.raw({
  display: "grid",
  gridTemplateColumns: "auto 1fr auto",
  columnGap: "md",
  rowGap: "sm",
  alignItems: "center",
});

const exampleContainerStyle = css.raw({
  display: "flex",
  flexDirection: "column",
  gap: "lg",
});

const tokenBarCellStyle = css.raw({
  display: "flex",
});

const tokenNameStyle = css.raw({
  fontSize: "sm",
  fontFamily: "mono",
  color: "neutral.text",
  textAlign: "right",
});

const tokenBarStyle = css.raw({
  height: "4",
  backgroundColor: "primary.sunken",
  borderRadius: "sm",
  display: "inline-block",
});

const tokenValueStyle = css.raw({
  fontSize: "xs",
  color: "neutral.text",
  fontFamily: "mono",
});

const paddingListStyle = css.raw({
  display: "flex",
  flexDirection: "column",
  gap: "sm",
});

const paddingRowStyle = css.raw({
  display: "flex",
  alignItems: "center",
  gap: "md",
});

const paddingLabelStyle = css.raw({
  width: "6",
  fontSize: "sm",
  fontFamily: "mono",
  color: "neutral.text",
  textAlign: "right",
});

const paddingOuterStyle = css.raw({
  backgroundColor: "primary.sunken",
  borderRadius: "md",
  border: "1px dashed",
  borderColor: "primary.border.muted",
  display: "inline-flex",
});

const paddingInnerStyle = css.raw({
  backgroundColor: "primary.surface",
  fontSize: "xs",
  fontFamily: "mono",
  color: "primary.text",
  whiteSpace: "nowrap",
  padding: "2xs",
});

const paddingInnerRadiusStyles = {
  xs: css.raw({ borderRadius: "inner.md.xs" }),
  sm: css.raw({ borderRadius: "inner.md.sm" }),
  md: css.raw({ borderRadius: "inner.md.md" }),
  lg: css.raw({ borderRadius: "inner.md.lg" }),
  xl: css.raw({ borderRadius: "inner.md.xl" }),
} as const;

const gapContainerStyle = css.raw({
  display: "flex",
  flexDirection: "column",
  gap: "md",
});

const gapRowStyle = css.raw({
  display: "flex",
});

const gapBoxStyle = css.raw({
  width: "12",
  height: "8",
  backgroundColor: "success.sunken",
  borderRadius: "sm",
});

const gapLabelStyle = css.raw({
  fontSize: "xs",
  fontFamily: "mono",
  color: "neutral.text",
  alignSelf: "center",
});

// Use paddingInlineEnd to visualize spacing tokens (width uses size tokens, not spacing)
const spacingBarStyles = {
  none: css.raw({ paddingInlineEnd: "none" }),
  "4xs": css.raw({ paddingInlineEnd: "4xs" }),
  "3xs": css.raw({ paddingInlineEnd: "3xs" }),
  "2xs": css.raw({ paddingInlineEnd: "2xs" }),
  xs: css.raw({ paddingInlineEnd: "xs" }),
  sm: css.raw({ paddingInlineEnd: "sm" }),
  md: css.raw({ paddingInlineEnd: "md" }),
  lg: css.raw({ paddingInlineEnd: "lg" }),
  xl: css.raw({ paddingInlineEnd: "xl" }),
  "2xl": css.raw({ paddingInlineEnd: "2xl" }),
  "3xl": css.raw({ paddingInlineEnd: "3xl" }),
  "4xl": css.raw({ paddingInlineEnd: "4xl" }),
  "5xl": css.raw({ paddingInlineEnd: "5xl" }),
  "6xl": css.raw({ paddingInlineEnd: "6xl" }),
  "7xl": css.raw({ paddingInlineEnd: "7xl" }),
  "8xl": css.raw({ paddingInlineEnd: "8xl" }),
  "9xl": css.raw({ paddingInlineEnd: "9xl" }),
  "10xl": css.raw({ paddingInlineEnd: "10xl" }),
  "11xl": css.raw({ paddingInlineEnd: "11xl" }),
} as const;

const spacingPaddingStyles = {
  xs: css.raw({ padding: "xs" }),
  sm: css.raw({ padding: "sm" }),
  md: css.raw({ padding: "md" }),
  lg: css.raw({ padding: "lg" }),
  xl: css.raw({ padding: "xl" }),
} as const;

const spacingGapStyles = {
  xs: css.raw({ gap: "xs" }),
  sm: css.raw({ gap: "sm" }),
  md: css.raw({ gap: "md" }),
  lg: css.raw({ gap: "lg" }),
} as const;

// Data — matches the actual token values from packages/panda-preset/src/tokens/spacing.ts
const spacingTokens = [
  { name: "none", value: "0" },
  { name: "4xs", value: "0.2rem" },
  { name: "3xs", value: "0.4rem" },
  { name: "2xs", value: "0.6rem" },
  { name: "xs", value: "0.8rem" },
  { name: "sm", value: "1.2rem" },
  { name: "md", value: "1.6rem" },
  { name: "lg", value: "2.0rem" },
  { name: "xl", value: "2.4rem" },
  { name: "2xl", value: "2.8rem" },
  { name: "3xl", value: "3.2rem" },
  { name: "4xl", value: "3.6rem" },
  { name: "5xl", value: "4.0rem" },
  { name: "6xl", value: "4.4rem" },
  { name: "7xl", value: "4.8rem" },
  { name: "8xl", value: "5.2rem" },
  { name: "9xl", value: "5.6rem" },
  { name: "10xl", value: "6.0rem" },
  { name: "11xl", value: "6.4rem" },
];

const paddingSizes = ["xs", "sm", "md", "lg", "xl"] as const;
const gapSizes = ["xs", "sm", "md", "lg"] as const;
---

<div class={containerStyle}>
  <div class={css(sectionStyle)}>
    <h3 class={css(sectionTitleStyle)}>Spacing Scale</h3>
    <div class={css(tokenContainerStyle)}>
      {
        spacingTokens.map((token) => (
          <>
            <div class={css(tokenNameStyle)}>{token.name}</div>
            <div class={css(tokenBarCellStyle)}>
              <div
                class={css(
                  tokenBarStyle,
                  spacingBarStyles[token.name as keyof typeof spacingBarStyles],
                )}
              />
            </div>
            <span class={css(tokenValueStyle)}>{token.value}</span>
          </>
        ))
      }
    </div>
  </div>

  <div class={css(sectionStyle)}>
    <h3 class={css(sectionTitleStyle)}>Spacing Examples</h3>
    <div class={css(exampleContainerStyle)}>
      <div>
        <h4 class={css(subsectionTitleStyle)}>Padding Examples</h4>
        <div class={css(paddingListStyle)}>
          {
            paddingSizes.map((size) => (
              <div class={css(paddingRowStyle)}>
                <span class={css(paddingLabelStyle)}>{size}</span>
                <div class={css(paddingOuterStyle, spacingPaddingStyles[size])}>
                  <div
                    class={css(
                      paddingInnerStyle,
                      paddingInnerRadiusStyles[size],
                    )}
                  >
                    content
                  </div>
                </div>
              </div>
            ))
          }
        </div>
      </div>

      <div>
        <h4 class={css(subsectionTitleStyle)}>Gap Examples</h4>
        <div class={css(gapContainerStyle)}>
          {
            gapSizes.map((size) => (
              <div class={css(gapRowStyle, spacingGapStyles[size])}>
                <div class={css(gapBoxStyle)} />
                <div class={css(gapBoxStyle)} />
                <div class={css(gapBoxStyle)} />
                <span class={css(gapLabelStyle)}>gap: {size}</span>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  </div>
</div>