import { useBackgroundRemoval } from '../../hooks/useBackgroundRemoval';

export function BackgroundRemovalButton({ selectedElement, onUpdate }) {
  const { loading, progress, hasModel, loadModel, removeBackground } = useBackgroundRemoval();

  const handleRemoveBackground = async () => {
    if (!selectedElement || selectedElement.type !== 'image') return;
    if (!hasModel) { const loaded = await loadModel(); if (!loaded) return; }
    const resultUrl = await removeBackground(selectedElement.src);
    if (resultUrl) onUpdate(selectedElement.id, { src: resultUrl, bgRemoved: true });
  };

  if (!selectedElement || selectedElement.type !== 'image') return null;

  return (
    <div className="bg-removal-container">
      <button className="bg-removal-btn" onClick={handleRemoveBackground} disabled={loading}>
        {loading ? (<><div className="spinner-small" />{progress > 0 ? `Loading: ${progress}%` : 'Removing Background...'}</>) : (<>✨ Remove Background</>)}
      </button>
      {!hasModel && <p className="bg-removal-hint">First use requires downloading ~86MB model. Subsequent uses are cached.</p>}
    </div>
  );
}