'use client'

import * as React from 'react'
import { cn } from '../../lib/utils'
import { resolveSessionStatus } from './status'
import type { SessionStatusKind } from './types'

export interface SessionStatusBadgeProps {
  /** Explicit status kind. If omitted, derived from `isActive`. */
  status?: SessionStatusKind
  /** Human label. Defaults from the resolved kind. */
  label?: string
  /** Fallback when `status` is absent. */
  isActive?: boolean
  /** Show the leading state dot. Default true. */
  showDot?: boolean
  className?: string
}

/**
 * A generic session status pill. Colour + label come from `resolveSessionStatus`
 * using tailwind tokens — no app-specific palette. (Named `SessionStatusBadge` to
 * avoid the existing `StatusBadge` export in `../badge`.)
 */
export function SessionStatusBadge({
  status,
  label,
  isActive = false,
  showDot = true,
  className,
}: SessionStatusBadgeProps) {
  const resolved = resolveSessionStatus({ status, statusLabel: label, isActive })
  const isLive = resolved.kind === 'active'

  return (
    <span
      role="status"
      data-status={resolved.kind}
      aria-label={`Status: ${resolved.label}`}
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold',
        resolved.className,
        className,
      )}
    >
      {showDot && (
        <span
          aria-hidden="true"
          className={cn('h-1.5 w-1.5 rounded-full bg-current', isLive && 'animate-pulse')}
        />
      )}
      <span>{resolved.label}</span>
    </span>
  )
}