import { useRef, useState } from 'react';
import html2canvas from 'html2canvas';
import { Box, Camera, Layers3, Move3d, Rotate3d, ScanLine, Upload } from 'lucide-react';
import DentalViewport from './DentalViewport';
const ViewportPanel = () => { const [file,setFile]=useState(null), panel=useRef(null); const shot=async()=>{const canvas=await html2canvas(panel.current,{backgroundColor:'#05080d'}),a=document.createElement('a');a.download='shire-dental-viewport.png';a.href=canvas.toDataURL('image/png');a.click()}; return <section ref={panel} className="glass-panel relative min-h-[480px] overflow-hidden lg:col-span-2">
  <div className="absolute inset-x-0 top-0 z-10 flex items-center justify-between border-b border-white/[.06] p-3">
    <div className="flex items-center gap-2 text-xs text-slate-300"><Box className="h-4 w-4 text-cyan-400" />3D Clinical Viewport</div>
    <div className="flex gap-1">{[Move3d,Rotate3d,Layers3,ScanLine].map((Icon,i)=><button key={i} className="icon-button"><Icon /></button>)}<button onClick={shot} className="icon-button" title="Export screenshot"><Camera /></button></div>
  </div>
  <DentalViewport file={file} />
  <div className="absolute bottom-4 left-4 flex items-center gap-2"><label className="flex cursor-pointer items-center gap-2 rounded-lg bg-cyan-400 px-3 py-2 text-[10px] font-bold text-slate-950"><Upload className="h-3.5 w-3.5" />IMPORT SCAN<input onChange={e=>setFile(e.target.files[0])} type="file" accept=".stl,.obj,.ply" className="hidden" /></label><span className="max-w-40 truncate text-[9px] text-slate-600">{file?file.name:'STL · OBJ · PLY'}</span></div>
</section> };
export default ViewportPanel;