import { cn } from '@/lib/utils'
import type { AIQuotaStatus } from '@/types'

interface QuotaDisplayProps {
  quota: AIQuotaStatus
  compact?: boolean
}

export function QuotaDisplay({ quota, compact = false }: QuotaDisplayProps) {
  if (!quota.ai_enabled) return null

  const monthlyRemaining =
    quota.monthly_limit !== null
      ? Math.max(0, quota.monthly_limit - quota.monthly_used)
      : null

  const getColor = () => {
    if (!quota.allowed) return 'text-red-400'
    if (monthlyRemaining !== null && monthlyRemaining <= 1) return 'text-amber-400'
    return 'text-green-400'
  }

  if (compact) {
    return (
      <span className={cn('text-xs font-label', getColor())}>
        {monthlyRemaining !== null
          ? `${monthlyRemaining}/${quota.monthly_limit} builds`
          : 'Unlimited'}
      </span>
    )
  }

  return (
    <div className="flex items-center gap-2 rounded-lg border border-border bg-accent/50 px-3 py-1.5">
      <div className={cn('h-2 w-2 rounded-full', getColor().replace('text-', 'bg-'))} />
      <span className="text-xs text-muted-foreground">
        {monthlyRemaining !== null ? (
          <>
            <span className={cn('font-medium', getColor())}>{monthlyRemaining}</span>
            {' '}of {quota.monthly_limit} AI builds remaining
          </>
        ) : (
          'Unlimited AI builds'
        )}
      </span>
    </div>
  )
}
