"use client";

import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import React, { useState, useEffect } from "react";

interface StatCardProps {
  title: string;
  value: string | number;
  change?: string;
  changeType?: "positive" | "negative" | "neutral";
  icon: LucideIcon;
  iconColor?: string;
}

export function StatCard({
  title,
  value,
  change,
  changeType = "neutral",
  icon: Icon,
  iconColor = "text-navy-600",
}: StatCardProps) {
  return (
    <div className="rounded-xl border border-navy-100 bg-gradient-to-br from-white to-navy-50/50 p-4 sm:p-6 shadow-sm hover-lift">
      <div className="flex items-center justify-between mb-3 sm:mb-4">
        <div className="flex h-9 w-9 sm:h-10 sm:w-10 items-center justify-center rounded-lg bg-white shadow-sm">
          <Icon className={cn("h-4 w-4 sm:h-5 sm:w-5", iconColor)} />
        </div>
        {change && (
          <span
            className={cn(
              "text-[10px] sm:text-xs font-semibold px-1.5 sm:px-2 py-0.5 rounded-full hidden sm:inline-flex",
              changeType === "positive" && "bg-emerald-50 text-emerald-600",
              changeType === "negative" && "bg-red-50 text-red-600",
              changeType === "neutral" && "bg-navy-50 text-navy-600"
            )}
          >
            {change}
          </span>
        )}
      </div>
      <div className="text-xl sm:text-2xl font-bold text-navy-900 mb-0.5 sm:mb-1 tabular-nums count-up">{value}</div>
      <div className="text-xs sm:text-sm text-navy-500 font-light">{title}</div>
    </div>
  );
}
