import React, { useState } from "react";
import {
  TextField,
  Button,
  Box,
  Typography,
  Paper,
} from "@mui/material";

const TransferPage = () => {
  // State for form fields
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    if (name && email) {
      // Handle registration logic, like calling an API to create the user
      console.log("Registered with:", { name, email });
    } else {
      alert("Please fill in all fields.");
    }
  };

  return (
    <Box sx={{ padding: 3 }}>
      <Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}>
        <Typography sx={{ color: 'gray', fontSize: '30px' }}>Transaction</Typography>
      </Box>
      <Box sx={{ paddingTop: 2 }}>
        <Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}>
          <Typography sx={{ color: 'gray', fontSize: '20px' }}>Transfer</Typography>
        </Box>
        <Box sx={{ padding: 6 }}>
          <Paper sx={{ width: '100%', overflow: 'hidden' }}>
            <form onSubmit={handleSubmit}>
              <Box mb={2} m={2}>
                <TextField
                  label="Transaction Type"
                  variant="outlined"
                  fullWidth
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  required
                />
              </Box>
              <Box mb={2} m={2}>
                <TextField
                  label="Destination Account"
                  variant="outlined"
                  fullWidth
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  required
                />
              </Box>
              <Box mb={2} m={2}>
                <TextField
                  label="Amount"
                  variant="outlined"
                  fullWidth
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  type="text"
                  required
                />
              </Box>
              <Box mb={2} m={2}>
                <TextField
                  label="Description"
                  variant="outlined"
                  fullWidth
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  type="text"
                  required
                />
              </Box>

              <Box mt={2} mb={2} textAlign="center">
                <Button style={{ marginRight: '5px' }} variant="contained">Reset</Button>
                <Button variant="contained" color="success">Submit</Button>
              </Box>
            </form>
          </Paper>
        </Box>
      </Box>
    </Box>
  );
};

export default TransferPage;