import React from 'react';
import './Registro.css'; // Estilo para el formulario
import Encabezado from './Encabezado';

const Registro = () => {

  return (
      <div className="bodyRegistro">
        <Encabezado/>
        <h1 className='titRegistro'>Registro</h1>
        <h4>Datos Personales</h4>
        <form className='formRegistro'>
          <div className="campo">
            <label htmlFor="nombre">Nombre:</label>
            <input type="text" id="nombre" name='nombre'/>
          </div>
          <div className="campo">
            <label htmlFor="apellidoPaterno">Apellido Paterno:</label>
            <input type="text" id="apellidoPaterno" name='apellidoPaterno'/>
          </div>
          <div className="campo">
            <label htmlFor="apellidoMaterno">Apellido Materno:</label>
            <input type="text" id="apellidoMaterno" name="apellidoMaterno" />
          </div>
          <div className="campo">
            <label htmlFor="sexo">Sexo:</label>
            <select id="sexo" name="sexo">
              <option value="Masculino">Masculino</option>
              <option value="Femenino">Femenino</option>
            </select>
          </div>
          <div className="campo">
            <label htmlFor="nacimiento">Fecha Nacimiento:</label>
            <input type="date" id="nacimiento" name="nacimiento"/>
          </div>
          <div className="campo">
            <label htmlFor="nacionalidad">Nacionalidad:</label>
            <input type="text" id="nacionalidad" name="nacionalidad"/>
          </div>
          <div className="campo">
            <label htmlFor="ciudad">Ciudad:</label>
            <input type="text" id="ciudad" name="ciudad"/>
          </div>
          <div className="campo">
            <label htmlFor="direccion">Dirección:</label>
            <input type="text" id="direccion" name="direccion"/>
          </div>
          <div className="campo">
            <label htmlFor="codigoPostal">Código Postal:</label>
            <input type="text" id="codigoPostal" name="codigoPostal"/>
          </div>
          <div className="campo" id='campoTelefono'>
            <label htmlFor="telefono">Teléfono:</label>
            <input type="text" id="telefono" name="telefono"/>
          </div>
          <div className="campo" id='campoTelefonoCasa'>
            <label htmlFor="telefonoCasa">Teléfono Casa:</label>
            <input type="text" id="telefonoCasa" name="telefonoCasa"/>
          </div>
          <div className="campo" id='campoCorreo'>
            <label htmlFor="correo">Correo:</label>
            <input type="email" id="correo" name="correo"/>
          </div>
          <div className="campo"id='campoContraseña'>
            <label htmlFor="contrasena">Contraseña:</label>
            <input type="password" id="contrasena" name="contrasena"/>
          </div>
        </form>
        
          <h4>Datos de Tutor</h4>
          <form className='formRegistro'>
          <div className="campo">
            <label htmlFor="nombre">Nombre:</label>
            <input type="text" id="nombre" name='nombre'/>
          </div>
          <div className="campo">
            <label htmlFor="apellidoPaterno">Apellido Paterno:</label>
            <input type="text" id="apellidoPaterno" name='apellidoPaterno'/>
          </div>
          <div className="campo">
            <label htmlFor="apellidoMaterno">Apellido Materno:</label>
            <input type="text" id="apellidoMaterno" name="apellidoMaterno" />
          </div>
          <div className="campo">
            <label htmlFor="sexo">Sexo:</label>
            <select id="sexo" name="sexo">
              <option value="Masculino">Masculino</option>
              <option value="Femenino">Femenino</option>
            </select>
          </div>
          <div className="campo">
            <label htmlFor="parentesco">Parentesco:</label>
            <input type="text" id="parentesco" name="parentesco"/>
          </div>
          <div className="campo">
            <label htmlFor="Numero Celular">Numero Celular:</label>
            <input type="text" id="Numero Celular" name="Numero Celular"/>
          </div>
          <div className="campo">
            <label htmlFor="Numero Casa">Numero Casa:</label>
            <input type="text" id="Numero Casa" name="Numero Casa"/>
          </div>
          <div className="campo">
            <label htmlFor="edad">Edad:</label>
            <input type="text" id="edad" name="edad"/>
          </div>
          <div className="campo">
            <label htmlFor="direccion">Dirección:</label>
            <input type="text" id="direccion" name="direccion"/>
          </div>
        </form>
        
        <div className="btnenviar">
            <input type="submit" className="boton" value="Registrar" />
        </div>
    </div>
  );
}

export default Registro;