import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Colors, Radius, Shadow, Spacing, Typography } from '@/constants/theme';

interface CardProps {
    children: React.ReactNode;
    style?: object;
}

export function Card({ children, style }: CardProps) {
    return <View style={[styles.card, style]}>{children}</View>;
}

interface LabelProps {
    text: string;
    color?: string;
}

export function SectionLabel({ text, color = Colors.textSecondary }: LabelProps) {
    return <Text style={[styles.label, { color }]}>{text}</Text>;
}

interface CurrencyDisplayProps {
    amount: number;
    size?: 'display' | 'large' | 'normal';
    showSign?: boolean;
}

export function CurrencyDisplay({
    amount,
    size = 'normal',
    showSign = false,
}: CurrencyDisplayProps) {
    const isNegative = amount < 0;
    const color = isNegative ? Colors.negative : Colors.positive;
    const formatted = Math.abs(amount).toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });
    const sign = showSign ? (isNegative ? '- ' : '+ ') : '';

    const textStyle =
        size === 'display'
            ? styles.displayAmount
            : size === 'large'
                ? styles.largeAmount
                : styles.normalAmount;

    return (
        <View style={styles.currencyRow}>
            <Text style={[styles.currencyPrefix, { color }]}>
                {sign}R${'  '}
            </Text>
            <Text style={[textStyle, { color }]}>{formatted}</Text>
        </View>
    );
}

interface DividerProps {
    style?: object;
}

export function Divider({ style }: DividerProps) {
    return <View style={[styles.divider, style]} />;
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: Colors.surface,
        borderRadius: Radius.lg,
        padding: Spacing.lg,
        borderWidth: 1,
        borderColor: Colors.border,
        ...Shadow.card,
    },
    label: {
        ...Typography.caption,
        textTransform: 'uppercase',
        letterSpacing: 1.2,
    },
    currencyRow: {
        flexDirection: 'row',
        alignItems: 'flex-end',
    },
    currencyPrefix: {
        ...Typography.currencyLabel,
        paddingBottom: 4,
    },
    displayAmount: {
        ...Typography.display,
    },
    largeAmount: {
        ...Typography.h1,
    },
    normalAmount: {
        ...Typography.bodyLarge,
        fontFamily: 'DMSans_600SemiBold',
    },
    divider: {
        height: 1,
        backgroundColor: Colors.border,
        marginVertical: Spacing.md,
    },
});