"use client";
import React, { useCallback } from "react";
import { Box, Button, Stack } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useTranslation } from "react-i18next";
import JobPickExecution from "./JobPickExecution";

interface JoPickOrderDetailProps {
  pickOrderId: number | undefined;
  jobOrderId: number | undefined;
  onBack: () => void;
}

const JoPickOrderDetail: React.FC<JoPickOrderDetailProps> = ({
  pickOrderId,
  jobOrderId,
  onBack,
}) => {
  const { t } = useTranslation("jo");

  return (
    <Box>
      <Box sx={{ mb: 2 }}>
        <Button variant="outlined" onClick={onBack} startIcon={<ArrowBackIcon />}>
          {t("Back to List")}
        </Button>
      </Box>

      <JobPickExecution filterArgs={{ pickOrderId, jobOrderId }} />
    </Box>
  );
};

export default JoPickOrderDetail;