"use client";
import useFileUpload from "@/hooks/use-file-upload";
import { ChangeEvent } from "react";

const MyComponent = () => {
	const { progress, isUploading, error, uploadFile, cancelUpload } =
		useFileUpload();

	const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
		const file = event.target.files?.[0];
		if (file) {
			uploadFile(file, "/media/upload", (response) => {
				console.log("Upload success:", response);
			});
		}
	};

	return (
		<div>
			<input type="file" onChange={handleFileUpload} />
			{isUploading && <p>Uploading... {progress}%</p>}
			{error && <p>Error: {error}</p>}
			<button onClick={cancelUpload} disabled={!isUploading}>
				Cancel Upload
			</button>
		</div>
	);
};

export default MyComponent;