React Image Cropper Component

Develop a reusable React component that allows users to upload an image and then crop a selected portion of it. This is a common feature in many web applications for profile picture customization, content editing, and more.

Problem Description

Your task is to build a React component that takes an image file as input, displays it, and provides an interactive interface for the user to select a rectangular area to crop. The component should also allow the user to confirm the crop and return the cropped image data.

Key Requirements:

• Image Upload: The component should accept an image file (e.g., JPG, PNG) via an input element.
• Image Display: Once an image is uploaded, it should be displayed within the component.
• Cropping Interface:
  • Users should be able to draw a selection rectangle on the displayed image.
  • The selection rectangle should be visually represented and resizable/movable.
  • Consider handling aspect ratio constraints if necessary (though not strictly required for the base challenge).
• Cropping Action: A button or mechanism to trigger the cropping process.
• Output: Upon cropping, the component should provide the cropped image data, likely as a data URL or a Blob.
• State Management: The component should manage the state of the uploaded image, the selection area, and the cropped image.
• Styling: The component should be reasonably styled for usability, but complex design is not the primary focus.

Expected Behavior:

1. User clicks an "Upload Image" button/area.
2. User selects an image file from their local system.
3. The selected image appears in the cropper area.
4. User clicks and drags on the image to define a cropping region.
5. The cropping region is visually indicated (e.g., a dashed border).
6. User can adjust the size and position of the cropping region.
7. User clicks a "Crop" button.
8. The component processes the crop and displays the cropped image (or provides its data).

Edge Cases to Consider:

• No image uploaded yet.
• Invalid file types (though for simplicity, we can assume valid image types).
• Image is very small or very large.
• User attempts to crop without selecting an area.

Examples

Example 1: Basic Cropping

Input:
- Image file: A 500x300 pixel JPG named 'landscape.jpg'
- User interaction: Draws a rectangle from (100, 50) to (400, 250) on the image.
- User clicks "Crop".

Output:
- A new image (as a data URL) representing the region from (100, 50) with a width of 300 (400-100) and a height of 200 (250-50) from 'landscape.jpg'.

Example 2: Resizing and Moving

Input:
- Image file: A 600x400 pixel PNG named 'portrait.png'
- User interaction:
    1. Draws an initial rectangle from (50, 100) to (200, 300).
    2. Resizes the rectangle to extend to (250, 350).
    3. Moves the rectangle to start at (75, 120) and end at (225, 320).
- User clicks "Crop".

Output:
- A new image (as a data URL) representing the region from (75, 120) with a width of 150 (225-75) and a height of 200 (320-120) from 'portrait.png'.

Example 3: Handling No Selection

Input:
- Image file: A 200x200 pixel GIF named 'square.gif'
- User interaction: Does not draw any selection rectangle.
- User clicks "Crop".

Output:
- The component should ideally prompt the user to select an area or perhaps crop the entire image if no specific selection is made. For this challenge, assume it should display an informative message or not proceed with cropping.

Constraints

• The solution must be implemented using React and TypeScript.
• The core cropping logic should be handled within the React component itself, without relying on a heavy, pre-built cropping library (though utility functions for canvas manipulation are acceptable).
• The component should be responsive to container size, meaning the image and cropping area should scale appropriately if the component's parent container changes size.
• Performance: The image display and interaction should be smooth, even with moderately large images (e.g., up to 2048x2048 pixels).

Notes

• You will likely need to use the HTML <canvas> element for the actual image manipulation (drawing the image, applying the crop).
• Consider how to manage the bounding box of the cropping area (its x, y, width, height).
• Event handling for mouse down, move, and up will be crucial for the drag-and-resize functionality.
• Think about how to convert the selected region on the canvas to a new image data format.