import { useState } from 'react';
import { Eye, EyeOff, Lock, Unlock, Layers } from 'lucide-react';
import { demoLayers } from '@/lib/demoData';

const LayersPanel = () => {
  const [layers, setLayers] = useState(demoLayers);
  const toggle = (i, key) => setLayers(ls => ls.map((l, idx) => idx === i ? { ...l, [key]: !l[key] } : l));
  return (
    <div className="glass-panel flex flex-col p-3">
      <div className="mb-2.5 flex items-center gap-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">
        <Layers className="h-3.5 w-3.5" /> Layers
      </div>
      <div className="space-y-1">
        {layers.map((l, i) => (
          <div key={l.name} className="flex items-center gap-2 rounded-md border border-white/[.04] px-2 py-1.5 hover:bg-white/[.02]">
            <button onClick={() => toggle(i, 'visible')} className="text-slate-500 hover:text-cyan-300">
              {l.visible ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
            </button>
            <button onClick={() => toggle(i, 'locked')} className="text-slate-600 hover:text-cyan-300">
              {l.locked ? <Lock className="h-3.5 w-3.5" /> : <Unlock className="h-3.5 w-3.5" />}
            </button>
            <span className="h-2.5 w-2.5 rounded-sm" style={{ background: l.color, opacity: l.opacity }} />
            <span className="flex-1 truncate text-[11px] text-slate-300">{l.name}</span>
            <input type="range" min={0} max={1} step={0.1} defaultValue={l.opacity} className="h-1 w-12 accent-cyan-400" />
          </div>
        ))}
      </div>
    </div>
  );
};
export default LayersPanel;