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

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

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

export default SjCamera;