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
      {...attrs}
      data-ui-component="Section"
      class='wrn-section {class}'
      id='{id}'
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      data-spacing='{spacing}'
      data-border-top='{borderTop}'
      data-border-bottom='{borderBottom}'
    >
      {#if fullWidth}
        <slot></slot>
      {:else}
        <Container
          columns="1"
          gap="md"
          maxWidth='{maxWidth}'
          size='{size}'
          color='{color}'
        >
          <slot></slot>
        </Container>
      {/if}
    </section>
  }

  style {
    .wrn-section {
      --section-tint: transparent;
      --section-ink: inherit;
      position: relative;
      isolation: isolate;
      width: 100%;
      min-width: 0;
      padding-block: 3rem;
      background: var(--section-tint);
      color: var(--section-ink);
      scroll-margin-top: var(--wrn-sticky-header-offset, 5rem);
    }

    .wrn-section[data-spacing="sm"] {
      padding-block: 2rem;
    }

    .wrn-section[data-spacing="md"] {
      padding-block: 3rem;
    }

    .wrn-section[data-spacing="xl"] {
      padding-block: 5rem;
    }

    .wrn-section[data-variant="soft"] {
      --section-tint: var(--wrn-color-surface-soft);
    }

    .wrn-section[data-variant="raised"] {
      --section-tint: var(--wrn-color-surface-raised);
    }

    /*
     * tinted and solid pick their fill from the component colour, which is
     * why these are two attributes rather than one class per pairing. The
     * previous version spent a line on every variant and colour combination.
     */
    .wrn-section[data-variant="tinted"][data-color="primary"] {
      --section-tint: var(--wrn-color-primary-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="success"] {
      --section-tint: var(--wrn-color-success-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="warning"] {
      --section-tint: var(--wrn-color-warning-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="danger"] {
      --section-tint: var(--wrn-color-danger-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="info"] {
      --section-tint: var(--wrn-color-info-soft);
    }

    .wrn-section[data-variant="solid"][data-color="primary"] {
      --section-tint: var(--wrn-color-primary);
      --section-ink: var(--wrn-color-on-primary);
    }

    .wrn-section[data-variant="solid"][data-color="danger"] {
      --section-tint: var(--wrn-color-danger);
      --section-ink: var(--wrn-color-on-danger);
    }

    .wrn-section[data-border-top="true"] {
      border-top: 1px solid var(--wrn-color-border);
    }

    .wrn-section[data-border-bottom="true"] {
      border-bottom: 1px solid var(--wrn-color-border);
    }

    @media (min-width: 640px) {
      .wrn-section[data-spacing="lg"] {
        padding-block: 5rem;
      }

      .wrn-section[data-spacing="xl"] {
        padding-block: 6rem;
      }
    }
  }
}