import { Eye, EyeOff, Lock, Unlock, ArrowUp, ArrowDown, Copy } from 'lucide-react';

export default function LayerPanel({ layers, selected, onSelect, onUpdate, onMove, onDuplicate }) {
  return (
    <div className="space-y-2">
      {layers.map(layer => (
        <div key={layer.id} onClick={() => onSelect(layer)} className={`group flex cursor-pointer items-center gap-2 rounded-lg border p-2.5 transition ${selected?.id === layer.id ? 'border-cyan-400/50 bg-cyan-400/[0.08]' : 'border-white/[0.06] bg-white/[0.02] hover:border-white/15'}`}>
          <div className="flex flex-col">
            <button onClick={e => { e.stopPropagation(); onMove(layer, -1); }} className="text-slate-600 hover:text-cyan-300"><ArrowUp size={13} /></button>
            <button onClick={e => { e.stopPropagation(); onMove(layer, 1); }} className="text-slate-600 hover:text-cyan-300"><ArrowDown size={13} /></button>
          </div>
          <span className={`min-w-0 flex-1 truncate text-sm ${selected?.id === layer.id ? 'text-cyan-100' : 'text-slate-300'}`}>{layer.name}</span>
          <button onClick={e => { e.stopPropagation(); onUpdate(layer, { visible: !layer.visible }); }} className="text-slate-500 hover:text-white">{layer.visible ? <Eye size={15} /> : <EyeOff size={15} />}</button>
          <button onClick={e => { e.stopPropagation(); onUpdate(layer, { locked: !layer.locked }); }} className="text-slate-500 hover:text-white">{layer.locked ? <Lock size={15} className="text-amber-300" /> : <Unlock size={15} />}</button>
          <button onClick={e => { e.stopPropagation(); onDuplicate(layer); }} className="text-slate-500 hover:text-white" title="Duplicate"><Copy size={14} /></button>
        </div>
      ))}
      {!layers.length && <p className="empty">No artwork layers yet.</p>}
    </div>
  );
}