import React, { useState, useEffect } from 'react';
import { Box, Avatar, Typography } from '@mui/material';
import PropTypes from 'prop-types';

function Profile({ imageSrc, employeeId, EmployeeName ,location}) {
  const [initials, setInitials] = useState('');

  useEffect(() => {
    if (EmployeeName) {
      const nameParts = EmployeeName.split(' ');

      const firstName = nameParts[0] || '';
      const lastName = nameParts[1] || '';

      const firstInitial = firstName.charAt(0);
      const lastInitial = lastName.charAt(0) || '';

      setInitials(firstInitial + lastInitial);
    }
  }, [EmployeeName]);

  const imgInitials = String(initials);

  return (
    <Box className="profile-container">
      <Avatar 
        id="profileImage" 
        alt={employeeId} 
        src={imageSrc || undefined} 
        className="avatar"
      >
        {imageSrc ? null : imgInitials}
      </Avatar>
      <Typography className="name">{EmployeeName}</Typography>
      <Typography className="name empID">{employeeId}</Typography>
      <Typography className="name empID">{location  }</Typography>

    </Box>
  );
}

Profile.propTypes = {
  imageSrc: PropTypes.string,
  employeeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  EmployeeName: PropTypes.string.isRequired,
  location: PropTypes.string,
};

Profile.defaultProps = {
  imageSrc: '',
  location: '',
};

export default Profile;
