component Divider {
  props {
    size: string = "default"
    color: string = "primary"
    label: string = ""
    orientation: string = "horizontal"
    class: string = ""
  }

  view {
    <div
      {...attrs}
      data-ui-component="Divider"
      data-size='{size}'
      data-color='{color}'
      data-orientation='{orientation}'
      class='w-full {class}'
      class:h-full='orientation === "vertical"'
      class:w-auto='orientation === "vertical"'
    >
      {#if orientation === "vertical"}
        <div
          role="separator"
          aria-orientation="vertical"
          class="mx-3 h-full min-h-6 border-l border-[var(--wire-color-border)]"
          class:border-l-2='size === "lg"'
          class:border-[var(--wire-color-primary)]='color === "primary"'
          class:border-[var(--wire-color-secondary)]='color === "secondary"'
          class:border-[var(--wire-color-success)]='color === "success"'
          class:border-[var(--wire-color-warning)]='color === "warning"'
          class:border-[var(--wire-color-danger)]='color === "danger"'
        ></div>
      {:else}
        <div
          role="separator"
          aria-orientation="horizontal"
          class="flex w-full items-center gap-4"
        >
          <span
            class="h-px flex-1 bg-[var(--wire-color-border)]"
            class:h-0.5='size === "lg"'
            class:bg-[var(--wire-color-primary)]='color === "primary" && label !== ""'
            class:bg-[var(--wire-color-secondary)]='color === "secondary" && label !== ""'
            class:bg-[var(--wire-color-success)]='color === "success" && label !== ""'
            class:bg-[var(--wire-color-warning)]='color === "warning" && label !== ""'
            class:bg-[var(--wire-color-danger)]='color === "danger" && label !== ""'
            aria-hidden="true"
          ></span>

          {#if label}
            <span class="shrink-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-text-muted)]">
              {label}
            </span>
            <span
              class="h-px flex-1 bg-[var(--wire-color-border)]"
              class:h-0.5='size === "lg"'
              class:bg-[var(--wire-color-primary)]='color === "primary"'
              class:bg-[var(--wire-color-secondary)]='color === "secondary"'
              class:bg-[var(--wire-color-success)]='color === "success"'
              class:bg-[var(--wire-color-warning)]='color === "warning"'
              class:bg-[var(--wire-color-danger)]='color === "danger"'
              aria-hidden="true"
            ></span>
          {/if}
        </div>
      {/if}
    </div>
  }
}