import React from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";

export default function QuickMetrics({ title, description, icon: Icon, metrics, route, gradient }) {
  const navigate = useNavigate();

  return (
    <Card className="border-slate-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 cursor-pointer group">
      <CardHeader className={`bg-gradient-to-br ${gradient} border-b border-slate-100`}>
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle className="text-[#1C323E] text-base mb-1 flex items-center gap-2">
              <Icon className="w-5 h-5 text-[#0A39DF]" />
              {title}
            </CardTitle>
            <p className="text-xs text-slate-500">{description}</p>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-6">
        <div className="space-y-3 mb-4">
          {metrics.map((metric, index) => (
            <div key={index} className="flex items-center justify-between">
              <span className="text-sm text-slate-600">{metric.label}</span>
              <span className={`font-bold text-lg ${metric.color}`}>{metric.value}</span>
            </div>
          ))}
        </div>
        <Button
          onClick={() => navigate(createPageUrl(route))}
          className="w-full bg-[#0A39DF] hover:bg-[#0A39DF]/90 group-hover:shadow-md transition-all"
        >
          View Dashboard
          <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
        </Button>
      </CardContent>
    </Card>
  );
}