import { Badge, Button, Card } from "@wrnexus/ui"

component AccountStatus {
  props {
    status: string = "active"
    title: string = "Account status"
    activeMessage: string = "Your account is active and ready to use."
    pendingMessage: string = "Verify your contact details to activate your account."
    lockedMessage: string = "Your account is temporarily locked for security."
    disabledMessage: string = "Your account has been disabled."
    supportHref: string = "/support"
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }

  view {
    <Card {...attrs} title='{title}' color='{color}' size='{size}' align="center" class='w-full max-w-lg {class}'>
      <div class="flex flex-col items-center text-center" data-status='{status}'>
        <span class='flex size-14 items-center justify-center rounded-full bg-[var(--wrn-color-surface-2)] text-[var(--wrn-color-primary)]'>
          {#if status == "active"}<span class="icon-[lucide--circle-check] size-7"></span>{:else if status == "pending"}<span class="icon-[lucide--clock-3] size-7"></span>{:else}<span class="icon-[lucide--shield-alert] size-7"></span>{/if}
        </span>
        <p class="mx-auto mt-3 max-w-md text-sm text-[var(--wrn-color-muted)]">{status == "active" ? activeMessage : status == "pending" ? pendingMessage : status == "locked" ? lockedMessage : disabledMessage}</p>
        <Badge label='{status}' color='{status == "active" ? "success" : status == "pending" ? "warning" : "danger"}' variant="soft" size="sm" />
        {#if status != "active"}<Button href='{supportHref}' label="Contact support" color='{color}' size='{size}' class="mt-4" />{/if}
      </div>
    </Card>
  }
}