import React, { useState } from "react";
import { Box, Input, Typography } from "@mui/material";

const ImgUploader = () => {
  const [selectedImage, setSelectedImage] = useState(null);
  const [imageUrl, setImageUrl] = useState(null);

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      const reader = new FileReader();
      reader.onload = () => {
        setSelectedImage(selectedFile);
        setImageUrl(reader.result);
      };
      reader.readAsDataURL(selectedFile);
    }
  };

  return (
    <Box>
      <Typography>سند:</Typography>
      <Input type="file" accept="image/*" onChange={handleFileChange} />
      {selectedImage && (
        <Box mt={2}>
          <img
            src={imageUrl}
            alt="img"
            width="200px"
            style={{ borderRadius: "10px" }}
          />
        </Box>
      )}
    </Box>
  );
};

export default ImgUploader;