component Typography {
  props {
    size: string = "default"
    color: string = "primary"
    columns: number = 2
    gap: string = "md"
    maxWidth: string = "xl"
    class: string = ""
  }

  view {
    <div
      data-ui-component="Typography"
      class='wire-typography text-[var(--wire-color-text)] {class}'
      class:max-w-3xl='maxWidth === "md"'
      class:max-w-5xl='maxWidth === "lg"'
      class:max-w-7xl='maxWidth === "xl"'
      class:max-w-none='maxWidth === "full"'
      class:text-sm='size === "sm"'
      class:text-base='size === "default" || size === "md"'
      class:text-lg='size === "lg"'
      class:columns-1='columns === 1'
      class:md:columns-2='columns === 2'
      class:lg:columns-3='columns === 3'
      class:gap-4='gap === "sm"'
      class:gap-8='gap === "md"'
      class:gap-12='gap === "lg"'
    >
      <slot></slot>
    </div>
  }

  style {
    .wire-typography :where(h1, h2, h3, h4) {
      color: var(--wire-color-text);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.2;
      break-after: avoid;
    }

    .wire-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
    .wire-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
    .wire-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
    .wire-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
    .wire-typography :where(p, li) { color: var(--wire-color-text-muted); line-height: 1.8; }
    .wire-typography :where(a) { color: var(--wire-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
    .wire-typography :where(a:hover) { color: var(--wire-color-primary-hover); text-decoration: underline; }
    .wire-typography :where(ul, ol) { padding-left: 1.4rem; }
    .wire-typography :where(ul) { list-style: disc; }
    .wire-typography :where(ol) { list-style: decimal; }
    .wire-typography :where(blockquote) {
      border-left: 4px solid var(--wire-color-primary);
      background: var(--wire-color-primary-soft);
      border-radius: 0 0.75rem 0.75rem 0;
      padding: 1rem 1.25rem;
      color: var(--wire-color-text);
    }
    .wire-typography :where(code) {
      border-radius: 0.35rem;
      background: var(--wire-color-surface-soft);
      padding: 0.15rem 0.35rem;
      font-size: 0.9em;
    }
    .wire-typography :where(pre) {
      overflow-x: auto;
      border: 1px solid var(--wire-color-border);
      border-radius: 1rem;
      background: var(--wire-color-surface-raised);
      padding: 1rem;
    }
    .wire-typography :where(img) { border-radius: 1rem; }
    .wire-typography :where(hr) { border-color: var(--wire-color-border); margin: 2rem 0; }
  }
}