// template/src/components/AmountDisplay/index.tsx
import React from 'react';
import { View, StyleProp, ViewStyle, TextStyle } from 'react-native';
import { ThemedText } from '../ThemedText';

type TextVariant = 
  | 'heading' 
  | 'subheading'
  | 'body' 
  | 'bodyLarge'
  | 'bodySmall'
  | 'caption'
  | 'label'
  | 'labelSmall'
  | 'amount'
  | 'amountLarge'
  | 'accountNumber';

interface AmountDisplayProps {
  amount: number;
  size?: 'large' | 'medium' | 'small';
  color?: 'primary' | 'secondary' | 'accent' | 'error' | 'success' | 'warning';
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>; // Add this for text-specific styles
}

export const AmountDisplay: React.FC<AmountDisplayProps> = ({
  amount,
  size = 'large',
  color,
  style,
  textStyle
}) => {
  const isNegative = amount < 0;
  const absoluteAmount = Math.abs(amount);
  const pounds = Math.floor(absoluteAmount);
  const pence = Math.round((absoluteAmount - pounds) * 100);
  
  // Define variants based on size
  const getVariants = (): { currency: TextVariant; main: TextVariant; decimal: TextVariant } => {
    switch (size) {
      case 'large':
        return {
          currency: 'amount', // 18px
          main: 'amountLarge', // 28px  
          decimal: 'amount' // 18px
        };
      case 'medium':
        return {
          currency: 'bodySmall', // 14px
          main: 'amount', // 18px
          decimal: 'bodySmall' // 14px
        };
      case 'small':
        return {
          currency: 'caption', // 12px
          main: 'labelSmall', // 14px
          decimal: 'caption' // 12px
        };
      default:
        return {
          currency: 'amount',
          main: 'amountLarge',
          decimal: 'amount'
        };
    }
  };

  const variants = getVariants();
  
  return (
    <View style={[{ flexDirection: 'row', alignItems: 'baseline' }, style]}>
      {isNegative && (
        <ThemedText variant={variants.main} color={color} style={textStyle}>
          -
        </ThemedText>
      )}
      <ThemedText variant={variants.currency} color={color} style={textStyle}>
        £
      </ThemedText>
      <ThemedText variant={variants.main} color={color} style={textStyle}>
        {pounds.toLocaleString()}
      </ThemedText>
      <ThemedText variant={variants.decimal} color={color} style={textStyle}>
        .{pence.toString().padStart(2, '0')}
      </ThemedText>
    </View>
  );
};