"use client";

import { formatCurrency, cn } from "@/lib/utils";

interface BalanceDisplayProps {
    amount: number;
    label?: string;
    subtitle?: string;
    variant?: "default" | "large" | "compact" | "card";
    showCurrency?: boolean;
    colorScheme?: "default" | "success" | "danger" | "warning";
    className?: string;
}

const variantStyles = {
    default: {
        container: "space-y-1",
        label: "text-sm text-muted-foreground",
        amount: "text-2xl font-bold tabular-nums",
        subtitle: "text-xs text-muted-foreground",
    },
    large: {
        container: "space-y-2",
        label: "text-base text-muted-foreground font-medium",
        amount: "text-4xl font-bold tabular-nums",
        subtitle: "text-sm text-muted-foreground",
    },
    compact: {
        container: "space-y-0.5",
        label: "text-xs text-muted-foreground uppercase",
        amount: "text-lg font-semibold tabular-nums",
        subtitle: "text-xs text-muted-foreground",
    },
    card: {
        container: "p-4 rounded-lg border bg-card space-y-2",
        label: "text-sm font-medium text-card-foreground",
        amount: "text-3xl font-bold tabular-nums text-card-foreground",
        subtitle: "text-xs text-muted-foreground",
    },
};

const colorSchemes = {
    default: "text-foreground",
    success: "text-green-600",
    danger: "text-red-600",
    warning: "text-yellow-600",
};

export function BalanceDisplay({
    amount,
    label = "Solde",
    subtitle,
    variant = "default",
    showCurrency = true,
    colorScheme = "default",
    className,
}: BalanceDisplayProps) {
    const styles = variantStyles[variant];
    const amountColor = colorSchemes[colorScheme];

    return (
        <div className={cn(styles.container, className)}>
            {label && <div className={styles.label}>{label}</div>}
            <div className={cn(styles.amount, amountColor)}>
                {showCurrency ? formatCurrency(amount) : amount.toLocaleString('fr-FR')}
            </div>
            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
        </div>
    );
}