import { StatCardProps } from "@/constants/types";
import { colorMap } from "@/constants/constant";



export default function StatCard({ title, value, subtitle, progress, color }: StatCardProps) {
  return (
    <div className="rounded-xl border border-[#14253d] bg-[#0c1a2c] p-4 flex flex-col justify-between ">
      <div>
        <span className="text-xs font-bold uppercase tracking-wider text-gray-400">{title}</span>
        <div className="text-4xl font-bold text-white mt-1">{value}</div>
      </div>
      <div >
        <span className="text-xs text-gray-400">{subtitle}</span>
        <div className="w-full bg-[#162a45] h-1.5 rounded-full mt-2 overflow-hidden">
          <div 
            className={`h-1.5 rounded-full ${colorMap[color]} transition-all duration-500`} 
            style={{ width: `${progress}%` }} 
          />
        </div>
      </div>
    </div>
  );
}