import { Card } from "@wrnexus/ui"

component AuthShell {
  props {
    title: string = "Welcome"
    description: string = ""
    eyebrow: string = ""
    icon: string = "icon-[lucide--shield-check]"
    footer: string = ""
    color: string = "primary"
    size: string = "md"
    maxWidth: string = "md"
    class: string = ""
  }

  view {
    <Card
      {...attrs}
      title='{title}'
      description='{description}'
      header='{eyebrow}'
      footer='{footer}'
      color='{color}'
      size='{size}'
      class='w-full {class}'
      class:max-w-sm='maxWidth === "sm"'
      class:max-w-md='maxWidth === "md"'
      class:max-w-lg='maxWidth === "lg"'
      class:max-w-xl='maxWidth === "xl"'
      class:max-w-2xl='maxWidth === "2xl"'
      class:max-w-none='maxWidth === "full"'
    >
      <div class="mb-5 flex size-12 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--wire-color-primary)_12%,transparent)] text-[var(--wire-color-primary)]">
        <span class='{icon}' aria-hidden="true"></span>
      </div>
      <slot></slot>
    </Card>
  }
}