import React from "react";
import useCameraStore from "../hooks/useCameraStore";
import { IconButton } from "@mui/material";
import { PhotoCameraFrontOutlined } from "@mui/icons-material";

const PackageCamera: React.FC = () => {
  const { setImagePackage } = useCameraStore();
  const handleCapture = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePackage(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="px-4 py-8 items-center border-2 rounded-md shadow-sm w-[49%] text-center ">
      <input
        type="file"
        accept="image/*"
        capture="environment"
        onChange={handleCapture}
        className="hidden"
        id="pakageCameraInput"
      />
      <label htmlFor="pakageCameraInput" className="text-gray-600">
        <IconButton
          color="primary"
          aria-label="upload picture"
          component="span"
        >
          <PhotoCameraFrontOutlined fontSize="large" />
        </IconButton>
        <br />
        Foto Penerima
      </label>
    </div>
  );
};

export default PackageCamera;