import React from 'react';

/**
 * 통계 카드 컴포넌트 (글래스모피즘 + 원본 레이아웃)
 * 단일 시스템 지표를 세로 배치로 표시합니다.
 */
export default function StatCard({ title, value, sub, icon: Icon }) {
  return (
    <div className="relative overflow-hidden rounded-2xl p-6 flex flex-col gap-3
      bg-white/[0.03] backdrop-blur-xl border border-white/[0.08]
      shadow-[0_4px_24px_-1px_rgba(0,0,0,0.2),inset_0_1px_0_0_rgba(255,255,255,0.05)]
      hover:bg-white/[0.05] hover:border-white/[0.12] transition-all duration-300">
      
      {/* 상단 그라디언트 라인 */}
      <div className="absolute top-0 left-0 right-0 h-[1px] 
        bg-gradient-to-r from-transparent via-white/10 to-transparent" />

      {/* 아이콘 + 제목 */}
      <div className="flex items-center gap-2.5">
        <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-violet-500/20 
          border border-blue-500/20">
          <Icon size={16} className="text-blue-400" />
        </div>
        <span className="text-slate-400 text-sm font-medium">{title}</span>
      </div>
      
      {/* 메인 값 */}
      <div className="text-3xl font-bold bg-gradient-to-br from-white to-slate-300 
        bg-clip-text text-transparent">{value}</div>
      
      {/* 부가 정보 */}
      <div className="text-sm text-slate-500 mt-auto">{sub}</div>

      {/* 배경 데코레이션 */}
      <div className="absolute -right-4 -bottom-4 w-24 h-24 
        bg-gradient-to-br from-blue-500/5 to-violet-500/5 rounded-full blur-2xl" />
    </div>
  );
}