import { useNavigate } from "react-router-dom";
import { ChevronLeft } from "lucide-react";
import EditIncomingRecordForm from "@/record-management/components/recordOfficer/incomingRecords/editIncoming";
import { t } from "i18next";
import { Button } from "@/shared/common/ui/button";

const EditIncomingRecordPage = () => {
  const navigate = useNavigate();

  const handleSuccess = () => {
    navigate("/record-management/recordOfficer/incoming", {
      state: { shouldRefetch: true },
    });
  };

  const handleCancel = () => {
    navigate("/record-management/recordOfficer/incoming", {
      state: { shouldRefetch: true },
    });
  };

  return (
    <div className="container mx-auto space-y-6 py-6">
      <div className="flex items-center">
        <Button
          type="button"
          variant="outline"
          onClick={handleCancel}
          className="flex items-center gap-2 border-primary-500 text-primary-600 hover:bg-primary-50 hover:text-primary-700 dark:border-primary-400 dark:text-primary-300 dark:hover:bg-primary-900/30 dark:hover:text-primary-200"
        >
          <ChevronLeft className="h-4 w-4" />
          {t("common.back")}
        </Button>
      </div>
      <div className="rounded-lg border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30">
        <EditIncomingRecordForm
          onSuccess={handleSuccess}
          onCancel={handleCancel}
        />
      </div>
    </div>
  );
};

export default EditIncomingRecordPage;
