//Page2.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
import './Page2.css'; // CSS File import

// Import images from the src/components folder
import image from './components/image.png';
import somaiyatrust from './components/somaiyatrust.png';
import redlines from './components/redlines.png';

const Page2 = () => {
  const [selectedStream, setSelectedStream] = useState(null);

  // Handle stream click to display content
  const handleStreamClick = (stream) => {
    setSelectedStream(stream);
  };

  return (
    <div className="page-container">
      {/* Header Bar */}
      <header className="header-bar">
        <img src={image} alt="Left Logo" className="leftlogo" />
        <h1 className="college-name">Somaiya Scheduler</h1>
        <img src={somaiyatrust} alt="Right Logo" className="rightlogo" />
      </header>

      {/* Navigation Bar */}
      <nav className="navbar">
        <ul>
          <li><Link to="/page2">Home</Link></li>
          <li><a href="#">Schedule</a></li>
          <li><Link to="/page5">Meeting DataBase</Link></li>
          <li><Link to="/page6">Edit DataBase</Link></li>
          <li><Link to="/">Log Out</Link></li>
        </ul>
      </nav>

      {/* Main Content Container */}
      <div className="main-container">
        {/* Stream Bar (Right Side) */}
        <div className="stream-bar" id="streamBar">
          <h3>Streams</h3>
          <ul>
            <li onClick={() => handleStreamClick("Engineering & Technology")}><Link to="/page4">Engineering & Technology</Link></li>
            <li onClick={() => handleStreamClick("Management")}>Management Studies</li>
            <li onClick={() => handleStreamClick("Education")}>Education</li>
            <li onClick={() => handleStreamClick("Dharama")}>Dharama Studies</li>
            <li onClick={() => handleStreamClick("Commerce")}>Commerce & Business Studies</li>
            <li onClick={() => handleStreamClick("Science")}>Science</li>
            <li onClick={() => handleStreamClick("Humanities")}>Humanities & Social Science</li>
            <li onClick={() => handleStreamClick("Music")}>Music Performance & Art</li>
            <li onClick={() => handleStreamClick("Language")}>Language & Literature</li>
          </ul>
        </div>

        {/* Content Area (Left Side) */}
        <div className="content-area" id="contentArea">
          {selectedStream ? (
            <p>You selected <strong>{selectedStream}</strong>. Here are the programs and faculty details.</p>
          ) : (
            <p>Select a stream to view its programs and faculty.</p>
          )}
        </div>
      </div>

      {/* Footer */}
      <footer>
        <div className="terms">
          <a href="#">Terms and Policies</a>
          <img src={redlines} alt="Footer Logo" className="footer-image" />
        </div>
      </footer>
    </div>
  );
};

export default Page2;