import { Button, InputAdornment } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { useState } from "react";
import { SPACING } from "../../../../data/spacing";
import { NumberInput } from "../../../../components/number-format-custom/NumberFormatCustom";

export const SlaughterPayFactorBankGateway = ({
  provinceFactorToKillHouse,
  price,
  isRejected,
  barCode,
  killHouseFactorToProvince,
}) => {
  const [inputValue, setInputValue] = useState("");
  return (
    <Grid container gap={SPACING.SMALL} mt={SPACING.SMALL} alignItems="center">
      <Grid>
        <NumberInput
          allowLeadingZeros
          thousandSeparator=","
          id="outlined-basic"
          label="مبلغ برای پرداخت را وارد کنید"
          variant="outlined"
          InputProps={{
            endAdornment: <InputAdornment position="end">ریال</InputAdornment>,
          }}
          value={inputValue}
          onChange={(event) => setInputValue(event.target.value)}
        />
      </Grid>
      <Grid>
        <Button variant="contained">ارسال به درگاه پرداخت</Button>
      </Grid>
    </Grid>
  );
};
