component MetricCard {
  props {
    label = "Metric"
    value = "0"
    description = ""
    icon = ""
    prefix = ""
    suffix = ""
    trend = ""
    trendLabel = ""
    trendDirection = "neutral"
    href = ""
    actionLabel = ""
    size = "default"
    color = "primary"
    variant = "default"
    align = "left"
    class = ""
  }

  view {
    <article
      data-ui-component="MetricCard"
      class='group relative flex h-full flex-col rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-5 shadow-sm transition {class}'
      class:p-4='size === "sm"'
      class:p-6='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 === "minimal"'
      class:border-transparent='variant === "minimal"'
      class:shadow-none='variant === "minimal"'
      class:text-center='align === "center"'
      class:items-center='align === "center"'
      class:text-right='align === "right"'
      class:items-end='align === "right"'
      class:hover:border-[var(--wire-color-primary)]='href !== ""'
      class:hover:shadow-lg='href !== ""'
    >
      <div class="flex w-full items-start justify-between gap-4">
        <div>
          <p class="text-sm font-semibold text-[var(--wire-color-text-muted)]">{label}</p>
          <p class="mt-2 text-3xl font-bold tracking-tight text-[var(--wire-color-text)]" class:text-4xl='size === "lg"'>
            <span>{prefix}</span><span>{value}</span><span>{suffix}</span>
          </p>
        </div>

        {#if icon}
          <span
            class="flex size-11 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"'
          >
            <span class='{icon + " size-5"}' aria-hidden="true"></span>
          </span>
        {/if}
      </div>

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

      {#if trend || trendLabel}
        <div class="mt-4 inline-flex items-center gap-2 text-sm font-semibold">
          <span
            class="inline-flex items-center gap-1 rounded-full px-2.5 py-1"
            class:bg-[var(--wire-color-success-soft)]='trendDirection === "up" || trendDirection === "positive"'
            class:text-[var(--wire-color-success)]='trendDirection === "up" || trendDirection === "positive"'
            class:bg-[var(--wire-color-danger-soft)]='trendDirection === "down" || trendDirection === "negative"'
            class:text-[var(--wire-color-danger)]='trendDirection === "down" || trendDirection === "negative"'
            class:bg-[var(--wire-color-surface-soft)]='trendDirection === "neutral"'
            class:text-[var(--wire-color-text-muted)]='trendDirection === "neutral"'
          >
            {#if trendDirection === "up" || trendDirection === "positive"}
              <span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>
            {:else if trendDirection === "down" || trendDirection === "negative"}
              <span class="icon-[lucide--trending-down] size-4" aria-hidden="true"></span>
            {:else}
              <span class="icon-[lucide--minus] size-4" aria-hidden="true"></span>
            {/if}
            <span>{trend}</span>
          </span>
          {#if trendLabel}
            <span class="text-[var(--wire-color-text-muted)]">{trendLabel}</span>
          {/if}
        </div>
      {/if}

      {#if href}
        <TextLink
          label='{actionLabel || "View details"}'
          href='{href}'
          color='{color}'
          size="sm"
          class="mt-5"
        />
      {/if}
    </article>
  }
}