<script lang="ts">
  import type { UtilizationIndicator } from '$lib/services/utilizationService';
  import { getUtilizationBadgeClass, formatUtilization, getUtilizationStatus } from '$lib/services/utilizationService';

  interface Props {
    utilization: number;
    indicator: UtilizationIndicator;
    size?: 'sm' | 'md' | 'lg';
    showStatus?: boolean;
    showYtd?: boolean;
    class?: string;
  }

  let {
    utilization,
    indicator,
    size = 'md',
    showStatus = false,
    showYtd = false,
    class: className = ''
  }: Props = $props();

  const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
    sm: 'badge-sm text-xs',
    md: 'badge-md text-sm',
    lg: 'badge-lg text-base'
  };

  $derived badgeClass = `${getUtilizationBadgeClass(indicator)} ${sizeClasses[size]}`;
</script>

<div class="inline-flex items-center gap-1.5 {className}">
  <span
    class="badge {badgeClass} font-medium"
    role="status"
    aria-label="Utilization: {formatUtilization(utilization)}, {getUtilizationStatus(indicator)}"
  >
    {formatUtilization(utilization)}
    {#if showYtd}
      <span class="opacity-70 ml-0.5">YTD</span>
    {/if}
  </span>
  {#if showStatus}
    <span class="text-xs text-base-content/60">{getUtilizationStatus(indicator)}</span>
  {/if}
</div>
