import React from 'react';
import { ArrowDown, ArrowUp, Network } from 'lucide-react';
import { formatBytes } from '../utils/format';

/**
 * 네트워크 상태 카드 컴포넌트 (글래스모피즘 + 원본 레이아웃)
 * 업로드와 다운로드 속도를 각각 행으로 표시합니다.
 */
export default function NetworkCard({ recv, sent }) {
  return (
    <div className="relative overflow-hidden rounded-2xl p-6 flex flex-col gap-4
      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-cyan-500/20 to-blue-500/20 
          border border-cyan-500/20">
          <Network size={16} className="text-cyan-400" />
        </div>
        <span className="text-slate-400 text-sm font-medium">네트워크</span>
      </div>
      
      <div className="flex flex-col gap-3">
        {/* 다운로드 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 text-emerald-400">
            <ArrowDown size={16} />
            <span className="text-sm">다운로드</span>
          </div>
          <span className="text-xl font-bold bg-gradient-to-r from-emerald-300 to-emerald-400 
            bg-clip-text text-transparent">{formatBytes(recv)}</span>
        </div>

        {/* 구분선 */}
        <div className="h-px bg-white/5" />

        {/* 업로드 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 text-blue-400">
            <ArrowUp size={16} />
            <span className="text-sm">업로드</span>
          </div>
          <span className="text-xl font-bold bg-gradient-to-r from-blue-300 to-blue-400 
            bg-clip-text text-transparent">{formatBytes(sent)}</span>
        </div>
      </div>

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