import React from 'react';
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { TrendingUp } from "lucide-react";

export default function StatsCard({ title, value, icon: Icon, gradient, change, textColor = "text-white" }) {
  return (
    <Card className="relative overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
      <div className={`absolute inset-0 ${gradient} opacity-100`} />
      <div className="absolute top-0 right-0 w-32 h-32 transform translate-x-8 -translate-y-8 bg-white/10 rounded-full" />
      <CardHeader className="p-6 relative z-10">
        <div className="flex justify-between items-start">
          <div>
            <p className={`text-sm font-medium mb-2 ${textColor === "text-white" ? "text-white/80" : "text-[#1C323E]/70"}`}>
              {title}
            </p>
            <div className={`text-3xl font-bold ${textColor}`}>
              {value}
            </div>
          </div>
          <div className="p-3 rounded-xl bg-white/20 backdrop-blur-sm">
            <Icon className={`w-6 h-6 ${textColor}`} />
          </div>
        </div>
        {change && (
          <div className="flex items-center mt-4 text-sm">
            <TrendingUp className={`w-4 h-4 mr-1 ${textColor === "text-white" ? "text-white" : "text-green-600"}`} />
            <span className={`font-medium ${textColor === "text-white" ? "text-white" : "text-green-600"}`}>
              {change}
            </span>
          </div>
        )}
      </CardHeader>
    </Card>
  );
}