"use client";

import React from "react";
import { Card } from "@/components/ui/card";
import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

interface StatsCardProps {
  title: string;
  value: string | number;
  icon: LucideIcon;
  iconColor: string;
  iconBg: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
  subtitle?: string;
  className?: string;
}

export function StatsCard({
  title,
  value,
  icon: Icon,
  iconColor,
  iconBg,
  trend,
  subtitle,
  className,
}: StatsCardProps) {
  return (
    <Card
      className={cn(
        "bg-white/10 backdrop-blur border-white/20 p-2 sm:p-3 hover:bg-white/15 transition-all duration-300",
        className
      )}
    >
      <div className="flex items-start justify-between">
        <div className="flex items-center space-x-2 flex-1">
          <div className={cn("p-1.5 sm:p-2 rounded-lg", iconBg)}>
            <Icon className={cn("h-3 w-3 sm:h-4 sm:w-4", iconColor)} />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-white/60 text-xs font-medium truncate">
              {title}
            </p>
            <p
              className="text-sm sm:text-lg font-bold text-white mt-0.5 truncate"
              title={value.toString()}
            >
              {value}
            </p>
            {subtitle && (
              <p className="text-white/40 text-xs mt-0.5 truncate hidden sm:block">
                {subtitle}
              </p>
            )}
          </div>
        </div>

        {trend && (
          <div
            className={cn(
              "flex items-center space-x-1 px-1.5 py-0.5 rounded-full text-xs font-medium hidden sm:flex",
              trend.isPositive
                ? "bg-green-500/20 text-green-300"
                : "bg-red-500/20 text-red-300"
            )}
          >
            <span
              className={cn(
                "text-xs",
                trend.isPositive ? "text-green-400" : "text-red-400"
              )}
            >
              {trend.isPositive ? "↗" : "↘"}
            </span>
            <span>{Math.abs(trend.value)}%</span>
          </div>
        )}
      </div>
    </Card>
  );
}
