import React from 'react';

interface EmployeeStatusNameProps {
  name?: React.ReactNode
  status?: string | null
  isBlocked?: boolean | null
}

// Renders an employee's name struck-through when they are blocked or not active,
// so stale assignments (made before the employee was blocked/deactivated) stay visible.
const EmployeeStatusName = ({ name, status, isBlocked }: EmployeeStatusNameProps): React.ReactElement | null => {
  if (name === undefined || name === null || name === '') {
    return null;
  }

  if (isBlocked) {
    return (
      <span style={{ color: '#e53e3e' }} title="Blocked">
        {name}
      </span>
    );
  }

  const isInactive = Boolean(status) && status?.toLowerCase() !== 'active';

  if (!isInactive) {
    return <>{name}</>;
  }

  return (
    <span
      style={{ textDecoration: 'line-through',textDecorationThickness: '2px', color: '#999' }}
      title="Inactive"
    >
      {name}
    </span>
  );
};

export default EmployeeStatusName;