LabPopup.tsx

import React from 'react';
import './LabPopup.css';
import { ResearchLabItem } from '../types';
import { Link } from 'react-router-dom';

interface LabPopupProps {
    lab: ResearchLabItem | null;
    onClose: () => void;
}

const LabPopup: React.FC<LabPopupProps> = ({ lab, onClose }) => {
    if (!lab) return null;

    return (
        <div className="popup-overlay">
            <div className="popup-content">
                <h2>{lab.name}</h2>
                <span className="close" onClick={onClose}>&times;</span>
                <div>
                    <h3>Principal Investigator:</h3>
                    <p>{lab.principleInvestigator}</p>
                </div>
                <div>
                    <h3>College:</h3>
                    <p>{lab.major.college}</p>
                </div>
                <div>
                    <h3>Major:</h3>
                    <p>{lab.major.name}</p>
                </div>
                <div>
                    <h3>Description:</h3>
                    <p>{lab.description}</p>
                </div>
                <Link to={`${lab.url}`} target="_blank">
                    <button className="primary-button">
                     Go to Website
                    </button>
                </Link>
            </div>
        </div>
    );
};

export default LabPopup;