d3ro-voice/packages/ui/src/components/ds/TactileBadge.tsx

'use client'

// packages/ui/src/components/ds/TactileBadge.tsx
// Hardware-grade telemetry badge / pill chip with optional LED bead and keycap rendering

import React from 'react'
import { Box, type BoxProps } from '@mui/material'
import { Led } from './Led'
import { d3roPalette, d3roFontSans, d3roFontMono, d3roRadius, typoSx } from '../../theme'

export interface TactileBadgeProps extends Omit<BoxProps, 'component'> {
  /** Optional LED indicator color */
  ledColor?: 'green' | 'amber' | 'red' | 'blue' | 'orange' | 'purple' | 'off'
  /** Whether the LED should pulse */
  ledPulse?: boolean
  /** Semantic tone for border and background */
  tone?: 'default' | 'accent' | 'success' | 'warning' | 'error' | 'mono'
  /** Whether to use monospace font */
  mono?: boolean
  /** Interactive clickable chip */
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
  /** Content to display */
  children?: React.ReactNode
}

export function TactileBadge({
  ledColor,
  ledPulse = false,
  tone = 'default',
  mono = false,
  onClick,
  children,
  sx,
  ...boxProps
}: TactileBadgeProps): React.ReactElement {
  const isClickable = Boolean(onClick)

  let textColor: string = d3roPalette.text.secondary
  let borderColor: string = d3roPalette.glass.hairlineStrong
  let bgColor: string = d3roPalette.glass.raised

  switch (tone) {
    case 'accent':
      textColor = d3roPalette.accent.light
      borderColor = d3roPalette.accent.dim
      bgColor = d3roPalette.accent.dim
      break
    case 'success':
      textColor = d3roPalette.tag.green
      borderColor = d3roPalette.tag.greenBg
      bgColor = d3roPalette.tag.greenBg
      break
    case 'warning':
      textColor = d3roPalette.tag.orange
      borderColor = d3roPalette.tag.orangeBg
      bgColor = d3roPalette.tag.orangeBg
      break
    case 'error':
      textColor = d3roPalette.tag.red
      borderColor = d3roPalette.tag.redBg
      bgColor = d3roPalette.tag.redBg
      break
    case 'mono':
      textColor = d3roPalette.text.primary
      borderColor = d3roPalette.border.default
      bgColor = d3roPalette.bg.inset
      break
  }

  return (
    <Box
      {...boxProps}
      onClick={onClick}
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 0.85,
        px: 1.25,
        py: 0.45,
        borderRadius: d3roRadius.badge,
        border: `1px solid ${borderColor}`,
        bgcolor: bgColor,
        color: textColor,
        ...typoSx('meta'),
        fontFamily: mono ? d3roFontMono : d3roFontSans,
        fontSize: '11px',
        fontWeight: 600,
        letterSpacing: '0.04em',
        textTransform: 'none',
        whiteSpace: 'nowrap',
        cursor: isClickable ? 'pointer' : 'default',
        transition: 'all 0.15s cubic-bezier(0.16, 1, 0.3, 1)',
        ...(isClickable
          ? {
              '&:hover': {
                borderColor: d3roPalette.accent.main,
                color: d3roPalette.text.primary,
                filter: 'brightness(1.15)',
                transform: 'translateY(-1px)',
              },
              '&:active': {
                transform: 'translateY(0) scale(0.97)',
              },
            }
          : {}),
        ...sx,
      }}
    >
      {ledColor && <Led color={ledColor} pulse={ledPulse} size={6} />}
      {children}
    </Box>
  )
}