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

component LocaleStatus {
  props {
    locale: string = "en"
    direction: string = "ltr"
    translated: number = 0
    total: number = 0
    label: string = "Current language"
    color: string = "primary"
    size: string = "sm"
    class: string = ""
  }
  view {
    <Card {...attrs} title='{label}' color='{color}' size='{size}' class='{class}'>
      <div class="flex flex-wrap items-center gap-2">
        <Badge label='{locale}' color='{color}' variant="soft" size='{size}' />
        <Badge label='{direction == "rtl" ? "RTL" : "LTR"}' color="neutral" variant="outline" size='{size}' />
        {#if total > 0}<span class="text-sm text-[var(--wrn-color-muted)]">{translated}/{total} translations</span>{/if}
      </div>
    </Card>
  }
}