component FeatureCard {
  props {
    icon = ""
    title = "Feature"
    description = ""
    href = ""
    actionLabel = "Learn more"
    actionIcon = ""
    badge = ""
    badgeColor = "primary"
    size = "default"
    color = "primary"
    variant = "default"
    hover = "lift"
    align = "left"
    disabled = false
    class = ""
  }

  view {
    <article
      data-ui-component="FeatureCard"
      aria-disabled='{disabled}'
      class='group relative flex h-full min-w-0 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] shadow-sm transition duration-200 {class}'
      class:p-4='size === "sm"'
      class:p-6='size === "default" || size === "md"'
      class:p-8='size === "lg"'
      class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
      class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
      class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
      class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
      class:bg-transparent='variant === "ghost"'
      class:border-transparent='variant === "ghost"'
      class:shadow-none='variant === "ghost" || variant === "outline"'
      class:hover:-translate-y-1='hover === "lift" && !disabled'
      class:hover:shadow-xl='(hover === "lift" || hover === "shadow") && !disabled'
      class:hover:border-[var(--wire-color-primary)]='(hover === "lift" || hover === "border") && !disabled'
      class:text-center='align === "center"'
      class:items-center='align === "center"'
      class:text-right='align === "right"'
      class:items-end='align === "right"'
      class:opacity-60='disabled'
      class:pointer-events-none='disabled'
    >
      <div class="flex w-full items-start justify-between gap-4">
        <div
          class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
          class:bg-[var(--wire-color-success-soft)]='color === "success"'
          class:text-[var(--wire-color-success)]='color === "success"'
          class:bg-[var(--wire-color-warning-soft)]='color === "warning"'
          class:text-[var(--wire-color-warning-text)]='color === "warning"'
          class:bg-[var(--wire-color-danger-soft)]='color === "danger"'
          class:text-[var(--wire-color-danger)]='color === "danger"'
          class:bg-[var(--wire-color-info-soft)]='color === "info"'
          class:text-[var(--wire-color-info)]='color === "info"'
          class:size-10='size === "sm"'
          class:size-14='size === "lg"'
        >
          <slot name="icon"></slot>
          {#if icon}
            <span class='{icon + " size-6"}' aria-hidden="true"></span>
          {/if}
        </div>

        {#if badge}
          <Badge
            label='{badge}'
            size="sm"
            color='{badgeColor}'
            variant="soft"
          />
        {/if}
      </div>

      <h3 class="mt-5 text-lg font-bold leading-tight text-[var(--wire-color-text)]" class:text-xl='size === "lg"'>
        {title}
      </h3>

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

      <slot></slot>

      <div class="mt-6 flex w-full items-center justify-between gap-3">
        <slot name="footer"></slot>

        {#if href && actionLabel}
          <TextLink
            label='{actionLabel}'
            href='{href}'
            icon='{actionIcon}'
            iconPosition="start"
            showArrow="true"
            size="sm"
            color='{color}'
            class="ml-auto"
          />
        {/if}
      </div>

      {#if href}
        <a
          href='{href}'
          aria-label='{title}'
          class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--wire-color-focus)]"
        ></a>
      {/if}
    </article>
  }
}