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

'use client'

// packages/ui/src/components/ds/PhysicalButton.tsx
// High-End Tactile Button with Button-in-Button Trailing Icon & Spring Physics

import React from 'react'
import { Button, Box, type ButtonProps } from '@mui/material'
import { d3roPalette, d3roFontSans, d3roShadow, d3roRadius, d3roTypo } from '../../theme'

export interface PhysicalButtonProps extends Omit<ButtonProps, 'variant'> {
  /** Active selected state (renders primary accent gradient) */
  selected?: boolean
  /** Visual button tone */
  tone?: 'accent' | 'glass' | 'danger' | 'success' | 'ghost'
  /** Trailing icon rendered in a nested circular capsule (Button-in-Button pattern) */
  trailingIcon?: React.ReactNode
}

export function PhysicalButton({
  selected = false,
  tone = 'glass',
  trailingIcon,
  children,
  sx,
  ...props
}: PhysicalButtonProps): React.ReactElement {
  const isAccent = selected || tone === 'accent'
  const isDanger = tone === 'danger'
  const isSuccess = tone === 'success'

  let bg: string = d3roPalette.glass.raised
  let bgImage: string = 'none'
  let textColor: string = d3roPalette.text.primary
  let borderColor: string = d3roPalette.glass.hairline
  let shadow: string = 'none'

  if (isAccent) {
    bg = 'transparent'
    bgImage = d3roPalette.gradient.accent
    textColor = d3roPalette.text.inverse
    borderColor = 'transparent'
    shadow = d3roShadow.glowAccent
  } else if (isDanger) {
    bg = d3roPalette.tag.redBg
    textColor = d3roPalette.tag.red
    borderColor = d3roPalette.tag.redGlow
  } else if (isSuccess) {
    bg = d3roPalette.tag.greenBg
    textColor = d3roPalette.tag.green
    borderColor = d3roPalette.tag.greenGlow
  }

  return (
    <Button
      {...props}
      sx={{
        height: 40,
        px: trailingIcon ? 2 : 2.5,
        bgcolor: bg,
        backgroundImage: bgImage,
        border: `1px solid ${borderColor}`,
        borderRadius: d3roRadius.button,
        color: textColor,
        fontFamily: d3roFontSans,
        fontSize: d3roTypo.compact.size,
        fontWeight: 600,
        cursor: 'pointer',
        boxShadow: shadow,
        textTransform: 'none',
        letterSpacing: '0.01em',
        minWidth: 0,
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1.25,
        transition: 'all 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
        '&:hover': {
          bgcolor: isAccent ? undefined : d3roPalette.bg.cardHover,
          borderColor: isAccent ? 'transparent' : d3roPalette.glass.hairlineStrong,
          color: isAccent ? d3roPalette.text.inverse : d3roPalette.text.primary,
          filter: isAccent ? 'brightness(1.08)' : 'none',
          boxShadow: isAccent ? d3roShadow.glowAccent : d3roShadow.card,
          transform: 'translateY(-1px)',
          '& .d3-button-trailing-icon': {
            transform: 'translateX(2px)',
          },
        },
        '&:active': {
          transform: 'translateY(0) scale(0.98)',
          filter: 'brightness(0.95)',
        },
        ...sx,
      }}
    >
      <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>
        {children}
      </Box>
      {trailingIcon && (
        <Box
          className="d3-button-trailing-icon"
          sx={{
            width: 24,
            height: 24,
            borderRadius: '50%',
            bgcolor: isAccent ? 'rgba(255, 255, 255, 0.18)' : d3roPalette.bg.inset,
            border: `1px solid ${isAccent ? 'rgba(255, 255, 255, 0.2)' : d3roPalette.border.subtle}`,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: isAccent ? d3roPalette.text.inverse : d3roPalette.text.secondary,
            transition: 'transform 0.2s ease',
            flexShrink: 0,
            '& svg': { width: 14, height: 14 },
          }}
        >
          {trailingIcon}
        </Box>
      )}
    </Button>
  )
}