import React from "react";
import { useTusUpload } from "@web/src/hooks/useTusUpload"; // 假设 useTusUpload 在同一个目录下
import * as tus from "tus-js-client";
interface TusUploadProps {
	onSuccess?: (upload: tus.Upload) => void;
	onError?: (error: Error) => void;
}

export const TusUploader: React.FC<TusUploadProps> = ({
	onSuccess,
	onError,
}) => {
	const { progress, isUploading, uploadError, handleFileUpload } =
		useTusUpload();

	return (
		<div>
			<input
				type="file"
				onChange={(e) => {
					const file = e.target.files?.[0];
					if (file) handleFileUpload(file, onSuccess, onError);
				}}
			/>

			{isUploading && (
				<div>
					<progress value={progress} max="100" />
					<span>{progress}%</span>
				</div>
			)}

			{uploadError && (
				<div style={{ color: "red" }}>上传错误: {uploadError}</div>
			)}
		</div>
	);
};

export default TusUploader;