'use client';

import React from 'react';
import ImageCropEditor from './ImageCropEditor';
import styles from './ImageCropModal.module.css';

interface ImageCropModalProps {
  file: File;
  onCropComplete: (dataUrl: string) => void;
  onCancel: () => void;
  /** Aspect ratio for the crop area (width/height). Defaults to 16/9. */
  aspectRatio?: number;
  /** Label to display in the modal header. */
  aspectRatioLabel?: string;
}

export default function ImageCropModal({
  file,
  onCropComplete,
  onCancel,
  aspectRatio,
  aspectRatioLabel = '16:9',
}: ImageCropModalProps) {
  return (
    <div className={styles.overlay}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <h2>Crop Image to {aspectRatioLabel}</h2>
          <button className={styles.closeButton} onClick={onCancel}>
            ✕
          </button>
        </div>

        <div className={styles.content}>
          <ImageCropEditor
            file={file}
            onCropApply={onCropComplete}
            onCancel={onCancel}
            aspectRatio={aspectRatio}
          />
        </div>
      </div>
    </div>
  );
}