import React from 'react';

/**
 * 서비스 카드 컴포넌트 (글래스모피즘 버전)
 * 특정 서비스의 정보와 상태를 프리미엄 디자인으로 표시합니다.
 */
export default function ServiceCard({ title, desc, icon: Icon, url, status }) {
  return (
    <a 
      href={url} 
      target="_blank" 
      rel="noopener noreferrer" 
      className="group relative overflow-hidden rounded-2xl p-6 flex flex-col items-center
        bg-white/[0.03] backdrop-blur-xl border border-white/[0.08]
        hover:bg-white/[0.06] hover:border-white/[0.15] hover:-translate-y-0.5
        transition-all duration-300 ease-out
        shadow-[0_4px_24px_-1px_rgba(0,0,0,0.2),inset_0_1px_0_0_rgba(255,255,255,0.05)]
        hover:shadow-[0_8px_32px_-4px_rgba(0,0,0,0.3)]"
    >
      {/* 상단 그라디언트 라인 (항상 표시, 호버 시 강조) */}
      <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white/10 to-transparent 
        group-hover:via-blue-400/40 transition-all duration-300" />

      {/* 상태 표시기 */}
      <div className={`absolute top-4 right-4 w-2.5 h-2.5 rounded-full transition-all duration-500
        ${status === true 
          ? 'bg-emerald-400 shadow-[0_0_8px_2px_rgba(52,211,153,0.5)]' 
          : status === false 
            ? 'bg-rose-400 shadow-[0_0_8px_2px_rgba(251,113,133,0.5)]' 
            : 'bg-amber-400 shadow-[0_0_6px_2px_rgba(251,191,36,0.4)]'
        }`} 
      />
      
      {/* 아이콘 (단순한 호버 효과) */}
      <div className="mb-4 p-3 rounded-xl bg-white/[0.04] border border-white/[0.06]
        group-hover:border-white/[0.12] transition-all duration-300">
        <Icon 
          size={40} 
          className="text-slate-400 group-hover:text-slate-200 transition-colors duration-300" 
        />
      </div>
      
      {/* 서비스 제목 */}
      <h3 className="text-lg font-bold mb-1.5 text-center text-slate-100 
        group-hover:text-white transition-colors">{title}</h3>
      
      {/* 서비스 설명 */}
      <p className="text-sm text-slate-500 text-center break-keep 
        group-hover:text-slate-400 transition-colors">{desc}</p>
    </a>
  );
}