import { memo } from 'react'; import { BackgroundRemovalButton } from '../sidebar/BackgroundRemovalButton'; export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate, onDelete, onEditPhoto }) { if (!element) { return (

Properties

Select an element to edit its properties
); } const handlePositionChange = (axis, value) => onUpdate({ [axis]: parseFloat(value) || 0 }); const handleSizeChange = (axis, value) => onUpdate({ [axis]: Math.max(20, parseFloat(value) || 20) }); const handleRotationChange = (value) => onUpdate({ rotation: Math.max(-180, Math.min(180, parseFloat(value) || 0)) }); const inputStyle = { width: '100%', padding: '0.5rem', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', fontSize: '13px' }; const labelStyle = { display: 'block', fontSize: '11px', fontWeight: '600', color: 'var(--text-secondary)', marginBottom: '0.5rem', textTransform: 'uppercase' }; return (

Properties

{/* Element type badge */}
{element.type}
{/* Position */}
handlePositionChange('x', e.target.value)} style={inputStyle} />
handlePositionChange('y', e.target.value)} style={inputStyle} />
{/* Size (for images and stickers) */} {(element.type === 'image' || element.type === 'sticker') && (
handleSizeChange('width', e.target.value)} style={inputStyle} />
handleSizeChange('height', e.target.value)} style={inputStyle} />
)} {/* Edit Photo button */} {element.type === 'image' && onEditPhoto && (
)} {/* Text-specific controls */} {element.type === 'text' && ( <>
onUpdate({ fontSize: parseInt(e.target.value, 10) })} style={{ width: '100%' }} />
onUpdate({ fill: e.target.value })} style={{ width: '100%', height: '36px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', padding: '2px' }} />
)} {/* Rotation */}
handleRotationChange(e.target.value)} style={{ width: '100%' }} />
{/* Background Removal (for images) */} {element.type === 'image' && ( onUpdate(attrs)} /> )} {/* Delete */}
); });