import React from 'react';
import { Card } from "@/components/ui/card";

export default function StatusCard({ status, count, percentage, color }) {
  const colorClasses = {
    blue: "from-[#0A39DF] to-[#0A39DF]/80",
    purple: "from-purple-600 to-purple-700",
    green: "from-emerald-600 to-emerald-700",
    gray: "from-slate-600 to-slate-700",
    yellow: "from-amber-500 to-amber-600"
  };

  return (
    <Card className="p-6 bg-white border-slate-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-slate-500 mb-2">{status}</p>
          <div className={`w-14 h-14 bg-gradient-to-br ${colorClasses[color]} rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-md`}>
            {count}
          </div>
        </div>
        <div className="text-right">
          <div className="text-3xl font-bold text-[#1C323E]">{percentage}%</div>
          <p className="text-xs text-slate-500 mt-1">of total</p>
        </div>
      </div>
    </Card>
  );
}