<script>
  import { buzzer } from '../lib/buzzerStore';
  import { CpuIcon } from 'phosphor-svelte';
</script>
<div class="h-48 bg-indigo-950/20 border border-indigo-500/20 rounded-[2rem] p-6 relative overflow-hidden shrink-0">
    <div class="absolute top-6 right-6 text-indigo-500 opacity-20">
	    <CpuIcon class="w-12 h-12" weight="fill" />
	</div>
	<h3 class="text-indigo-400 text-[10px] font-black uppercase tracking-[0.2em] mb-4">
		Device Info
	</h3>
    <div class="text-[11px] font-mono text-slate-400 space-y-1 relative z-10 transition-all duration-300 {!$buzzer.connected ? 'blur-[1px] opacity-30 grayscale pointer-events-none' : ''}">
        <p>
            Firmware: <span class="text-indigo-300">{$buzzer.version}</span>
        </p>
        <p>
            Protocol: <span class="text-indigo-300">{$buzzer.protocol}</span>
        </p>
        <p>
            Status: <span class="{$buzzer.connected ? 'text-emerald-400' : 'text-red-400'}">
                {$buzzer.connected ? 'Confirmed' : 'Disconnected'}
            </span>
        </p>
    </div>
</div> 