Valuation legalEntity

import {
  Autocomplete,
  Box,
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  TextField,
  Typography,
} from '@mui/material';
import { Control, Controller } from 'react-hook-form';
import { useState } from 'react';

const Valuation = ({ control }: { control: Control }) => {
  const [businessValuation, setBusinessValuation] = useState<string>('');
  const [loanAccountsValuation, setLoanAccountsValuation] = useState<string>('');

  return (
    <>
      <Typography pt={4} pb={5} width="50%" color="text.secondary">
        Instructional text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </Typography>
      <Box display="flex">
        <Box display="flex" mb={1} alignItems="end">
          <Controller
            control={control}
            name="businessValuationCurrency"
            render={({ field: { onChange, value } }) => (
              <Autocomplete
                onChange={(event, item) => {
                  onChange(item?.label);
                }}
                value={value}
                defaultValue={{ label: 'ZAR' }}
                disableClearable
                options={[{ label: 'ZAR' }, { label: 'USD' }, { label: 'EUR' }]}
                sx={{ width: '70px' }}
                getOptionLabel={(option) => {
                  return option.label ?? option;
                }}
                isOptionEqualToValue={(option: { label: string }, value: { label: string }) =>
                  value.label === undefined || option.label === value.label
                }
                renderInput={(parameters) => (
                  <TextField {...parameters} variant="outlined" sx={{ p: 0 }} size="small" />
                )}
              />
            )}
          />
          <Controller
            name="businessValuation"
            control={control}
            render={({ field: { onChange, value }, fieldState: { error } }) => (
              <TextField
                value={value}
                sx={{ p: 0, width: '375px', mr: 5 }}
                label="Business valuation (own)"
                placeholder="e.g. 5000000"
                type="number"
                onChange={({ target: { value } }) => {
                  onChange(value);
                  setBusinessValuation(value);
                }}
              />
            )}
          />
        </Box>

        <Box display="flex" mb={1} alignItems="end">
          <Controller
            control={control}
            name="loanAccountsCurrency"
            render={({ field: { onChange, value } }) => (
              <Autocomplete
                onChange={(event, item) => {
                  onChange(item?.label);
                }}
                value={value}
                defaultValue={{ label: 'ZAR' }}
                disableClearable
                options={[{ label: 'ZAR' }, { label: 'USD' }, { label: 'EUR' }]}
                sx={{ width: '70px' }}
                getOptionLabel={(option) => {
                  return option.label ?? option;
                }}
                isOptionEqualToValue={(option: { label: string }, value: { label: string }) =>
                  value.label === undefined || option.label === value.label
                }
                renderInput={(parameters) => (
                  <TextField {...parameters} variant="outlined" sx={{ p: 0 }} size="small" />
                )}
              />
            )}
          />
          <Controller
            name="loanAccounts"
            control={control}
            render={({ field: { onChange, value }, fieldState: { error } }) => (
              <TextField
                value={value}
                sx={{ p: 0, width: '375px', mr: 5 }}
                label="Value of all loan accounts"
                placeholder="e.g. 5000000"
                type="number"
                onChange={({ target: { value } }) => {
                  onChange(value);
                  setLoanAccountsValuation(value);
                }}
              />
            )}
          />
        </Box>
      </Box>
      <Box mt={4} display="flex">
        <FormControl sx={{ width: '50%' }}>
          <FormLabel id="demo-controlled-radio-buttons-group">Valuation method</FormLabel>
          <RadioGroup defaultValue="Own" name="radio-buttons-group">
            <FormControlLabel value="Own" control={<Radio />} label="Own" />
            <FormControlLabel
              value="businessProfessionalValuation"
              control={<Radio />}
              label="Worth business professional valuation"
            />
          </RadioGroup>
        </FormControl>
        <Box width="50%" display="flex" flexDirection="column">
          <Typography>Total value of interest (Valuation + loan accounts)</Typography>
          <Typography variant="h1">
            R {Number(businessValuation) + Number(loanAccountsValuation)}
          </Typography>
        </Box>
      </Box>
    </>
  );
};
export default Valuation;