import React from 'react';
import { Zap, Bluetooth } from 'lucide-react';
import { DeviceStatus } from '../types';

interface HardwareStatusProps {
  status: DeviceStatus;
  onClick?: () => void;
  className?: string;
}

const HardwareStatus: React.FC<HardwareStatusProps> = ({ status, onClick, className = '' }) => {
  return (
    <button 
        onClick={onClick}
        className={`flex items-center justify-end transition-all duration-500 shrink-0 ${className}`}
    >
        <div className={`
            relative flex items-center h-7 pl-3 pr-3 rounded-full 
            bg-[#1A1625]/80 backdrop-blur-md border border-white/10 shadow-sm
            active:scale-95 transition-all duration-300 group hover:border-[#A855F7]/30
        `}>
            
            {/* Connection Status Icon */}
            <div className="relative flex items-center justify-center w-3 h-3 mr-2">
              {status.connected ? (
                 <>
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#10B981] opacity-20"></span>
                    <Bluetooth size={12} className="text-[#10B981] relative z-10" />
                 </>
              ) : (
                 <div className="w-1.5 h-1.5 rounded-full bg-gray-600"></div>
              )}
            </div>

            {/* Divider */}
            <div className="w-[1px] h-2.5 bg-white/10 mr-2"></div>

            {/* Battery Status */}
            {status.connected ? (
                <div className="flex items-center gap-1">
                     <span className={`text-[10px] font-mono font-bold tracking-wide tabular-nums ${status.battery < 20 ? 'text-[#F43F5E]' : 'text-[#E2E8F0]'}`}>
                        {Math.floor(status.battery)}%
                     </span>
                     <Zap 
                        size={9} 
                        className={`${status.battery < 20 ? 'text-[#F43F5E]' : 'text-[#A855F7]'} ${status.battery < 20 ? 'animate-pulse' : ''}`} 
                        fill={status.battery < 20 ? "currentColor" : "currentColor"} 
                     />
                </div>
            ) : (
                <span className="text-[9px] text-gray-500 font-medium tracking-wide">未连接</span>
            )}
            
            {/* Subtle Inner Glow */}
            <div className="absolute inset-0 rounded-full border border-white/5 pointer-events-none group-hover:border-[#A855F7]/20 transition-colors"></div>
        </div>
    </button>
  );
};

export default HardwareStatus;