import React from 'react';
import { RobotTarget } from '../../types';

interface FooterProps {
    isHostConnected: boolean;
    robotTarget: RobotTarget;
}

export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
    return (
        <footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
            <div className="flex gap-6">
                {['PLC', 'MOTION', 'VISION', 'LIGHT'].map(hw => (
                    <div key={hw} className="flex items-center gap-2">
                        <div className="w-2 h-2 bg-neon-green rounded-full shadow-[0_0_5px_#0aff00]"></div>
                        <span className="font-bold text-slate-300">{hw}</span>
                    </div>
                ))}
                <div className="flex items-center gap-2">
                    <div className={`w-2 h-2 rounded-full transition-all ${isHostConnected ? 'bg-neon-green shadow-[0_0_5px_#0aff00]' : 'bg-red-500 shadow-[0_0_5px_#ff0000] animate-pulse'}`}></div>
                    <span className={`font-bold ${isHostConnected ? 'text-slate-300' : 'text-red-400'}`}>HOST</span>
                </div>
            </div>
            <div className="flex gap-8 text-neon-blue">
                <span>POS.X: {robotTarget.x.toFixed(3)}</span>
                <span>POS.Y: {robotTarget.y.toFixed(3)}</span>
                <span>POS.Z: {robotTarget.z.toFixed(3)}</span>
            </div>
        </footer>
    );
};