AI Cost Breakdown Chart

"use client";

import React from "react";

const data = [
    { model: "GPT-4o", cost: 124.50, color: "bg-violet-500" },
    { model: "Claude 3.5", cost: 82.20, color: "bg-blue-500" },
    { model: "Gemini Pro", cost: 45.10, color: "bg-emerald-500" },
    { model: "Others", cost: 12.40, color: "bg-zinc-400" },
];

export default function AICostBreakdown() {
    const total = data.reduce((acc, curr) => acc + curr.cost, 0);

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-md mx-auto">
            <div className="flex items-center justify-between mb-6">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Cost Breakdown</h3>
                <span className="text-lg font-bold text-zinc-900 dark:text-zinc-100">${total.toFixed(2)}</span>
            </div>

            <div className="flex h-2 w-full rounded-full overflow-hidden bg-zinc-100 dark:bg-zinc-800 mb-6">
                {data.map((item) => (
                    <div
                        key={item.model}
                        className={item.color}
                        style={{ width: `${(item.cost / total) * 100}%` }}
                    />
                ))}
            </div>

            <div className="space-y-3">
                {data.map((item) => (
                    <div key={item.model} className="flex items-center justify-between text-xs">
                        <div className="flex items-center gap-2">
                            <div className={`h-2 w-2 rounded-full ${item.color}`} />
                            <span className="text-zinc-600 dark:text-zinc-400">{item.model}</span>
                        </div>
                        <div className="flex items-center gap-3">
                            <span className="text-zinc-900 dark:text-zinc-100 font-medium">${item.cost.toFixed(2)}</span>
                            <span className="text-zinc-400 w-8 text-right">{Math.round((item.cost / total) * 100)}%</span>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}