text: import React from 'react';
  import { Link } from 'react-router-dom';
  
  import './styles/BadgeDetails.css';
  import confLogo from '../images/platziconf-logo.svg';
  import Badge from '../components/Badge';
  import DeleteBadgeModal from '../components/DeleteBadgeModal';
  
  function BadgeDetails(props) {
    const badge = props.badge;
  
    return (
      <div>
        <div className="BadgeDetails__hero">
          <div className="container">
            <div className="row">
              <div className="col-6">
                <img  src={confLogo} alt="Logo" />
              </div>
              <div className="col-6 BadgeDetails__hero-attendant-name">
                <h1>
                  {badge.firstName} {badge.lastName}
                </h1>
              </div>
            </div>
          </div>
        </div>
  
        <div className="container">
          <div className="row">
            <div className="col d-flex justify-content-center">
              <Badge
                className="w-50"
                firstName={badge.firstName}
                lastName={badge.lastName}
                email={badge.email}
                twitter={badge.twitter}
                jobTitle={badge.jobTitle}
              />
            </div>
            
          </div>
          <div className="row">
          <div className="col">
              <div className="d-flex flex-row justify-content-center">
                <div>
                  <Link
                    className="btn btn-primary m-4"
                    to={`/badges/${badge.id}/edit`}
                  >
                    Edit
                  </Link>
                </div>
  
                <div>
                  <button onClick={props.onOpenModal} className="btn btn-danger m-4">
                    Delete
                  </button>
                  <DeleteBadgeModal
                    isOpen={props.modalIsOpen}
                    onClose={props.onCloseModal}
                    onDeleteBadge={props.onDeleteBadge}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  
  export default BadgeDetails;
  