import React from 'react';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

interface StatCardProps {
  title: string;
  value: string | number;
  description?: string;
  icon: LucideIcon;
  trend?: {
    value: number; // percentage change, e.g. +12 or -5
    label?: string; // e.g. "vs bulan lalu"
    type: 'positive' | 'negative' | 'neutral';
  };
  className?: string;
}

export function StatCard({
  title,
  value,
  description,
  icon: Icon,
  trend,
  className,
}: StatCardProps) {
  return (
    <div
      className={cn(
        'bg-white border border-slate-100 rounded-2xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300 flex justify-between items-start gap-4 relative overflow-hidden group',
        className
      )}
    >
      <div className="space-y-2 relative z-10">
        <span className="text-sm font-semibold text-text-muted uppercase tracking-wider block">
          {title}
        </span>
        <h3 className="text-3xl font-extrabold text-slate-800 tracking-tight">
          {value}
        </h3>
        
        {(trend || description) && (
          <div className="flex items-center gap-1.5 pt-1">
            {trend && (
              <span
                className={cn(
                  'text-xs font-bold px-2 py-0.5 rounded-full',
                  trend.type === 'positive' && 'bg-success/10 text-success',
                  trend.type === 'negative' && 'bg-danger/10 text-danger',
                  trend.type === 'neutral' && 'bg-text-muted/10 text-text-muted'
                )}
              >
                {trend.value > 0 ? `+${trend.value}` : trend.value}%
              </span>
            )}
            {(description || trend?.label) && (
              <span className="text-xs text-text-muted font-medium">
                {trend?.label || description}
              </span>
            )}
          </div>
        )}
      </div>

      <div className="p-3.5 bg-gradient-to-br from-primary/10 to-primary/5 text-primary rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:shadow-sm">
        <Icon className="h-6 w-6" strokeWidth={2.5} />
      </div>
    </div>
  );
}