AI Training Progress

"use client";

import React from "react";
import { Activity, Clock, Cpu, Layout } from "lucide-react";

export default function AITrainingProgress() {
    const steps = [
        { label: "Loss", val: "0.0042", change: -12, color: "text-emerald-500" },
        { label: "Accuracy", val: "99.2%", change: 0.4, color: "text-blue-500" },
        { label: "Step/sec", val: "1.4k", change: 2, color: "text-zinc-900 dark:text-zinc-100" },
    ];

    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-2xl mx-auto overflow-hidden">
            <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-3">
                    <div className="p-2 rounded-lg bg-zinc-950">
                        <Cpu className="h-4 w-4 text-emerald-500 lg:animate-pulse" />
                    </div>
                    <div>
                        <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Active Training Session</h3>
                        <p className="text-[10px] text-zinc-400 font-bold uppercase tracking-widest mt-0.5">Epoch 42 / 100</p>
                    </div>
                </div>
                <div className="text-right">
                    <p className="text-xs font-bold text-zinc-500 flex items-center gap-2">
                        <Clock className="h-3 w-3" />
                        04:22:15 remaining
                    </p>
                </div>
            </div>

            <div className="grid grid-cols-3 gap-4 mb-8">
                {steps.map((s) => (
                    <div key={s.label} className="p-4 rounded-xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-100 dark:border-zinc-800">
                        <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">{s.label}</p>
                        <div className="flex items-baseline justify-between capitalize">
                            <p className={`text-xl font-bold tracking-tight ${s.color}`}>{s.val}</p>
                            <span className={`text-[10px] font-bold ${s.change < 0 ? "text-emerald-500" : "text-blue-500"}`}>
                                {s.change > 0 ? "+" : ""}{s.change}%
                            </span>
                        </div>
                    </div>
                ))}
            </div>

            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <span className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Global Progress</span>
                    <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">42%</span>
                </div>
                <div className="h-2 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden relative">
                    <div className="h-full w-[42%] bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.4)]" />
                    <div className="absolute top-0 bottom-0 w-8 bg-white/20 -skew-x-12 translate-x-[-100%] animate-[shimmer_2s_infinite]" />
                </div>
            </div>
        </div>
    );
}