import { demoScans } from '@/lib/demoData';
import { FileBox } from 'lucide-react';

const ScanThumbnails = () => (
  <div className="glass-panel p-3">
    <div className="mb-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">Scan Library</div>
    <div className="grid grid-cols-2 gap-2">
      {demoScans.map(s => (
        <button key={s.name} className="group rounded-md border border-white/[.06] bg-black/30 p-2 text-left hover:border-cyan-400/30">
          <div className="mb-1.5 grid h-12 place-items-center rounded bg-gradient-to-br from-slate-800 to-slate-900 text-slate-600 group-hover:text-cyan-300">
            <FileBox className="h-5 w-5" />
          </div>
          <div className="truncate text-[10px] text-slate-200">{s.name}</div>
          <div className="text-[8px] text-slate-600">{s.type} · {s.size}</div>
        </button>
      ))}
    </div>
  </div>
);
export default ScanThumbnails;