import {Check,LoaderCircle,Image} from 'lucide-react';
type State='loading'|'ready'|'error'|'idle';
export default function SelectionIndicator({state,label}:{state:State;label:string}){
  return <div className="selection-indicator" data-state={state} role="status" aria-label={label}>
    <svg className="selection-corners" viewBox="0 0 100 100" preserveAspectRatio="none" fill="none" aria-hidden="true"><path d="M18 1H7Q1 1 1 7V18 M82 1H93Q99 1 99 7V18 M99 82V93Q99 99 93 99H82 M18 99H7Q1 99 1 93V82" vectorEffect="non-scaling-stroke"/></svg>
    <span className="selection-badge" aria-hidden="true">{state==='loading'?<LoaderCircle className="selection-loading-icon" size={12}/>:state==='ready'?<Check size={12}/>:<Image size={12}/>}<span>{state==='idle'||state==='error'?'Image':'3D'}</span></span>
  </div>;
}