import Container from "./Container.wrn"

component Section {
  props {
    id: string = ""
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    spacing: string = "lg"
    maxWidth: string = "xl"
    fullWidth: boolean = false
    borderTop: boolean = false
    borderBottom: boolean = false
    class: string = ""
  }

  view {
    <section
      data-ui-component="Section"
      id='{id}'
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      class='relative isolate w-full {class}'
      class:py-8='spacing === "sm"'
      class:py-12='spacing === "md"'
      class:py-16='spacing === "lg"'
      class:sm:py-20='spacing === "lg"'
      class:py-20='spacing === "xl"'
      class:sm:py-24='spacing === "xl"'
      class:bg-[var(--wire-color-background)]='variant === "default"'
      class:bg-[var(--wire-color-surface-soft)]='variant === "soft"'
      class:bg-[var(--wire-color-surface-raised)]='variant === "raised"'
      class:bg-[var(--wire-color-primary-soft)]='variant === "tinted" && color === "primary"'
      class:bg-[var(--wire-color-success-soft)]='variant === "tinted" && color === "success"'
      class:bg-[var(--wire-color-warning-soft)]='variant === "tinted" && color === "warning"'
      class:bg-[var(--wire-color-danger-soft)]='variant === "tinted" && color === "danger"'
      class:bg-[var(--wire-color-info-soft)]='variant === "tinted" && color === "info"'
      class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
      class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
      class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
      class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
      class:border-t='borderTop'
      class:border-b='borderBottom'
      class:border-[var(--wire-color-border)]='borderTop || borderBottom'
    >
      {#if fullWidth}
        <slot></slot>
      {:else}
        <Container
          columns="1"
          gap="md"
          maxWidth='{maxWidth}'
          size='{size}'
          color='{color}'
        >
          <slot></slot>
        </Container>
      {/if}
    </section>
  }
}