AI Token Distribution

"use client";

import React from "react";

const tokens = [
    { text: "Artificial", prob: 0.98 },
    { text: "Intelligence", prob: 0.96 },
    { text: "is", prob: 0.99 },
    { text: "transforming", prob: 0.84 },
    { text: "the", prob: 0.99 },
    { text: "industry", prob: 0.72 },
];

export default function AITokenDistribution() {
    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 overflow-hidden">
            <div className="flex items-center justify-between mb-8">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Token Probability Distribution</h3>
                <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Top-K = 40</span>
            </div>

            <div className="space-y-3">
                {tokens.map((t) => (
                    <div key={t.text} className="space-y-1.5">
                        <div className="flex items-center justify-between text-[11px] font-bold">
                            <span className="text-zinc-900 dark:text-zinc-100 font-mono flex items-center gap-2">
                                <span className="h-1 w-1 bg-zinc-300 dark:bg-zinc-600 rounded-full" />
                                "{t.text}"
                            </span>
                            <span className={`tabular-nums ${t.prob > 0.9 ? "text-emerald-500" : "text-amber-500"}`}>
                                {(t.prob * 100).toFixed(1)}%
                            </span>
                        </div>
                        <div className="h-1.5 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                            <div
                                className={`h-full transition-all duration-1000 ${t.prob > 0.9 ? "bg-emerald-500" : "bg-amber-500"}`}
                                style={{ width: `${t.prob * 100}%` }}
                            />
                        </div>
                    </div>
                ))}
            </div>

            <div className="mt-8 p-3 rounded-lg bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
                <p className="text-[9px] font-bold text-zinc-400 uppercase tracking-widest leading-none">AVG Logprobs</p>
                <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">-0.1242</span>
            </div>
        </div>
    );
}