component FeatureIconCard {
  props {
    icon: string = "icon-[lucide--sparkles]"
    iconSize: string = "md"
    iconVariant: string = "soft"
    title: string = "Feature"
    description: string = ""
    href: string = ""
    actionLabel: string = "Explore"
    badge: string = ""
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    align: string = "left"
    hover: string = "lift"
    class: string = ""
  }

  view {
    <article
      data-ui-component="FeatureIconCard"
      class='group relative flex h-full flex-col rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm transition duration-200 {class}'
      class:p-5='size === "sm"'
      class:p-8='size === "lg"'
      class:bg-[var(--wire-color-surface-soft)]='variant === "soft"'
      class:bg-transparent='variant === "ghost"'
      class:border-transparent='variant === "ghost"'
      class:shadow-none='variant === "ghost"'
      class:hover:-translate-y-1='hover === "lift"'
      class:hover:shadow-xl='hover === "lift" || hover === "shadow"'
      class:hover:border-[var(--wire-color-primary)]='hover === "lift" || hover === "border"'
      class:items-center='align === "center"'
      class:text-center='align === "center"'
    >
      <div
        class="relative flex size-14 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)] ring-1 ring-inset ring-[var(--wire-color-primary-muted)]"
        class:size-12='iconSize === "sm"'
        class:size-16='iconSize === "lg"'
        class:bg-[var(--wire-color-primary)]='iconVariant === "solid" && color === "primary"'
        class:text-[var(--wire-color-on-primary)]='iconVariant === "solid" && color === "primary"'
        class:bg-[var(--wire-color-success-soft)]='color === "success" && iconVariant !== "solid"'
        class:text-[var(--wire-color-success)]='color === "success" && iconVariant !== "solid"'
        class:bg-[var(--wire-color-warning-soft)]='color === "warning" && iconVariant !== "solid"'
        class:text-[var(--wire-color-warning-text)]='color === "warning" && iconVariant !== "solid"'
        class:bg-[var(--wire-color-danger-soft)]='color === "danger" && iconVariant !== "solid"'
        class:text-[var(--wire-color-danger)]='color === "danger" && iconVariant !== "solid"'
      >
        <span class='{icon + " size-7"}' aria-hidden="true"></span>

        {#if badge}
          <span class="absolute -right-2 -top-2 rounded-full bg-[var(--wire-color-surface-raised)] px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-[var(--wire-color-primary)] shadow-sm ring-1 ring-[var(--wire-color-border)]">
            {badge}
          </span>
        {/if}
      </div>

      <h3 class="mt-6 text-xl font-bold tracking-tight text-[var(--wire-color-text)]">{title}</h3>

      {#if description}
        <p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted)]">{description}</p>
      {/if}

      <slot></slot>

      {#if href}
        <TextLink
          label='{actionLabel}'
          href='{href}'
          color='{color}'
          size="sm"
          class="mt-6"
        />
      {/if}

      <slot name="footer"></slot>
    </article>
  }
}