import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { TrendingUp, TrendingDown } from "lucide-react";
import { Link } from "react-router-dom";

interface StatCardProps {
  title: string;
  value: string;
  change?: string;
  changeType?: "positive" | "negative" | "neutral";
  description?: string;
  href?: string;
}

export function StatCard({ title, value, change, changeType = "neutral", description, href }: StatCardProps) {
  const content = (
    <Card className={cn("bg-card border-border transition-all duration-200", href && "hover:shadow-md hover:-translate-y-0.5 cursor-pointer")}>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-sm font-medium text-muted-foreground tracking-normal">{title}</CardTitle>
          {change && (
            <Badge
              variant="secondary"
              className={cn(
                "text-[10px] font-medium tabular-nums px-1.5 py-0 h-5 border",
                changeType === "positive" && "bg-chart-green/15 text-chart-green border-chart-green/30",
                changeType === "negative" && "bg-chart-red/15 text-chart-red border-chart-red/30",
                changeType === "neutral" && "bg-muted text-muted-foreground border-border"
              )}
            >
              {changeType === "positive" && <TrendingUp size={10} strokeWidth={1.5} className="mr-0.5" />}
              {changeType === "negative" && <TrendingDown size={10} strokeWidth={1.5} className="mr-0.5" />}
              {change}
            </Badge>
          )}
        </div>
      </CardHeader>
      <CardContent className="pb-0">
        <p className="text-2xl font-bold text-foreground tracking-tight tabular-nums">{value}</p>
      </CardContent>
      {description && (
        <CardFooter className="pt-2 pb-4">
          <p className="text-xs text-muted-foreground">{description}</p>
        </CardFooter>
      )}
    </Card>
  );

  if (href) return <Link to={href}>{content}</Link>;
  return content;
}