ImageCrop

import { Modal, ModalHeader, ModalBody, ModalFooter, ImageCrop } from '@akitectio/aki-ui'

function ImageCropModal() {
  const [showModal, setShowModal] = useState(false)
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [croppedImage, setCroppedImage] = useState('')
  const [borderRadiusPercent, setBorderRadiusPercent] = useState(25)

  const handleFileSelect = (file: File) => {
    setSelectedFile(file)
    setShowModal(true)
  }

  const handleCropComplete = (crop: any, croppedImageUrl: string) => {
    setCroppedImage(croppedImageUrl)
    setShowModal(false)
  }

  return (
    <>
      {/* File Picker Button */}
      <button onClick={triggerFilePicker}>
        Select Image to Crop
      </button>

      {/* Aki UI Modal */}
      <Modal isOpen={showModal} onClose={() => setShowModal(false)} size="xl">
        <ModalHeader onClose={() => setShowModal(false)}>
          Crop Your Image
        </ModalHeader>
        
        <ModalBody>
          <ImageCrop
            file={selectedFile}
            enableFilePicker={false}
            defaultAspectRatio={1}
            size="lg"
            enableZoom={true}
            minZoom={0.5}
            maxZoom={3}
            showBorderRadiusControl={true}
            cropBorderRadiusPercent={borderRadiusPercent}
            onBorderRadiusPercentChange={setBorderRadiusPercent}
            onCropComplete={handleCropComplete}
          />
        </ModalBody>
        
        <ModalFooter>
          <button onClick={() => setShowModal(false)}>Cancel</button>
        </ModalFooter>
      </Modal>

      {/* Display Result */}
      {croppedImage && (
        <img 
          src={croppedImage} 
          alt="Cropped" 
          style={{ borderRadius: borderRadiusPercent + '%' }}
        />
      )}
    </>
  )
}