import { Link } from 'react-router'
import pepperLogo from '../../assets/pepper_transp2_small.svg'
import styles from './Home.module.css'

/**
 * The home page component providing navigation and project branding.
 *
 * Renders the Pepper logo and a set of navigational links 
 * implemented via React Router.
 *
 * @returns A JSX element representing the app’s home page.
 */
function Home() {
  return (
    <div className={`flex-col ${styles.gapXl}`}>
      <div className="logoPepperScaling">
        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
          <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
        </a>
      </div>
      <div className={styles.links}>
        <Link to={"/robot"}>Robot Interaction →</Link>
        <Link to={"/editor"}>Editor →</Link>
        <Link to={"/template"}>Template →</Link>
        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
      </div>
    </div>
  )
}

export default Home