import { ImageCropModal } from '@pulsesync/uikit'
import type { CropType } from '@pulsesync/uikit'

const [isOpen, setIsOpen] = useState(false)

<ImageCropModal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    onSave={(blob) => console.log('Cropped:', blob)}
    imageUrl="https://example.com/image.jpg"
    cropType="avatar" // or "banner"
    labels={{
        avatarTitle: 'Crop Avatar',
        bannerTitle: 'Crop Banner',
        zoom: 'Zoom',
        cancel: 'Cancel',
        save: 'Save',
    }}
/>