import React from 'react';
import { Camera, Crosshair } from 'lucide-react';
import { PanelHeader } from './common/PanelHeader';

interface CameraPanelProps {
    videoRef: React.RefObject<HTMLVideoElement>;
}

export const CameraPanel: React.FC<CameraPanelProps> = ({ videoRef }) => (
    <div className="h-full flex flex-col">
        <PanelHeader title="Vision Feed" icon={Camera} />
        <div className="flex-1 bg-black relative overflow-hidden border border-slate-800 group">
            <video ref={videoRef} autoPlay playsInline className="w-full h-full object-cover opacity-80" />

            {/* HUD OVERLAY */}
            <div className="absolute inset-0 pointer-events-none">
                <div className="absolute top-0 left-0 w-full h-full border-[20px] border-neon-blue/10 clip-tech-inv"></div>
                <Crosshair className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 text-neon-blue opacity-50" />

                <div className="absolute top-4 right-4 flex flex-col items-end gap-1">
                    <span className="text-[10px] font-mono text-neon-red animate-pulse">● REC</span>
                    <span className="text-xs font-mono text-neon-blue">1920x1080 @ 60FPS</span>
                </div>

                <div className="absolute bottom-4 left-4 text-neon-blue/80 font-mono text-xs">
                    EXPOSURE: AUTO<br />
                    GAIN: 12dB<br />
                    FOCUS: 150mm
                </div>
            </div>
        </div>
        <div className="grid grid-cols-4 gap-2 mt-3">
            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM +</button>
            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">ZOOM -</button>
            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SNAP</button>
            <button className="bg-slate-800 text-slate-400 text-[10px] py-2 hover:bg-neon-blue hover:text-black transition-colors">SETTINGS</button>
        </div>
    </div>
);