d3ro-voice/packages/ui-native/src/components/PhosphorText.tsx

// packages/ui-native/src/components/PhosphorText.tsx
// RN용 PhosphorText — Text + 앰버 glow (textShadowColor)

import { Text, Platform, type TextProps, type TextStyle, type StyleProp } from 'react-native'
import { d3roNativePalette, d3roNativeTypo, type D3roNativeTypoKey } from '../theme'

export type PhosphorVariant = D3roNativeTypoKey

export interface PhosphorTextProps extends TextProps {
  variant?: PhosphorVariant
  color?: 'amber' | 'primary' | 'secondary' | 'label' | 'muted'
  style?: StyleProp<TextStyle>
}

export function PhosphorText({
  children,
  variant = 'body',
  color,
  style,
  ...rest
}: PhosphorTextProps): React.ReactElement {
  const typo = d3roNativeTypo[variant]
  const isAmberVariant = variant === 'hero' || variant === 'title' || variant === 'value'

  const resolvedColor: string = (() => {
    if (color === 'amber') return d3roNativePalette.accent.amber
    if (color === 'primary') return d3roNativePalette.text.primary
    if (color === 'secondary') return d3roNativePalette.text.secondary
    if (color === 'label') return d3roNativePalette.text.label
    if (color === 'muted') return d3roNativePalette.text.muted
    return isAmberVariant ? d3roNativePalette.accent.amber : d3roNativePalette.text.primary
  })()

  const baseStyle: TextStyle = {
    ...typo,
    color: resolvedColor,
    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
    ...(isAmberVariant
      ? {
          textShadowColor: d3roNativePalette.accent.amberGlow,
          textShadowOffset: { width: 0, height: 0 },
          textShadowRadius: 6
        }
      : {})
  }

  return (
    <Text style={[baseStyle, style]} {...rest}>
      {children}
    </Text>
  )
}