import React, {useContext} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCoins, faDollarSign} from "@fortawesome/free-solid-svg-icons";
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";

export default function CreditCounter({isCredit}: { isCredit: boolean }) {
    const {totalCredits, totalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
    
    if (isCredit) {
        return (
            <div
                className="flex items-center space-x-2 bg-secondary/50 rounded-xl px-3 py-2 border border-secondary/50 shadow-sm">
                <FontAwesomeIcon icon={faCoins} className="w-4 h-4 text-warning"/>
                <span className="text-sm text-text-primary font-medium">
                    {Math.round(totalCredits)} crédits
                </span>
            </div>
        );
    }
    
    return (
        <div
            className="flex items-center space-x-2 bg-secondary/50 rounded-xl px-3 py-2 border border-secondary/50 shadow-sm">
            <FontAwesomeIcon icon={faDollarSign} className="w-4 h-4 text-primary"/>
            <span className="text-sm text-text-primary font-medium">
                {totalPrice ? totalPrice.toFixed(2) : '0.00'}
            </span>
        </div>
    );
}