web2.0-frontend/src/views/FrontPage/FrontPageView.tsx

import React from "react";
import styled from "styled-components";
import { Card, PageLink, Divider, CardSection, CTASection } from "@components/index";
import FrontPageHero from "./FrontPageHero";
import { Event } from "@models/Event";
import { Post } from "@models/Feed";
import { colors } from "@theme/colors";
import { Link } from "@components/index";
import FullWidthSection from "@components/Sections/FullWidthSection";
import noop from "@utils/noop";

// Corporate logos import
import ABB from "@assets/img/corporate_logos/abb.png";
import Capgemini from "@assets/img/corporate_logos/capgemini.png";
import Caruna from "@assets/img/corporate_logos/caruna.jpg";
import Eaton from "@assets/img/corporate_logos/eaton.png";
import Ensto from "@assets/img/corporate_logos/ensto.jpg";
import eSett from "@assets/img/corporate_logos/esett.png";
import Fennovoima from "@assets/img/corporate_logos/fennovoima.png";
import Fingrid from "@assets/img/corporate_logos/fingrid.jpg";
import NRCGroup from "@assets/img/corporate_logos/nrcgroup.png";
import Okmetic from "@assets/img/corporate_logos/okmetic.png";
import Sogeti from "@assets/img/corporate_logos/sogeti.jpg";


interface FrontPageViewProps {
  events: Event[];
  feed: Post[];
}

const SponsorReel = styled.div`
  text-align: center;
  & > div {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 4rem;

    & > * {
      margin: 1rem;
    }
  }

  img {
    width: 200px;
    object-fit: cover;
  }
  a {
    color: ${colors.blue1};
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
`;


const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
  <>
    <FrontPageHero />
    <main>
      <CardSection>
        {events.map(event => (
          <Card
            key={event.id}
            title={event.title_fi}
            start_time={event.start_time}
            text={event.description_fi}
            link={`/events/${event.id}`}
            image={event.image || event.tags[0].icon}
            buttonOnClick={noop}
          />
        ))}
        <aside>
          <PageLink to="/kilta/toiminta#tapahtumat" desc="löydät tapahtumakalenterista&nbsp;›">
            Kaikki tapahtumat
          </PageLink>
        </aside>

      </CardSection>

      <CTASection
        bgColor="orange1"
        link="https://sosso.fi"
        linkText="Lue opiskelijalehden viimeisin numero&nbsp;›"
      >
        Sössöä vuodesta 1969.
      </CTASection>

      <CardSection>
        {feed.map(inst => (
          <Card
            key={inst.id}
            title={inst.title_fi}
            start_time={inst.publish_time}
            text={inst.description_fi}
            link={`/feed/${inst.id}`}
            buttonOnClick={noop}
          />
        ))}
        <aside>
          <PageLink to="/kilta/toiminta#uutiset" desc="ja hallituksen kuulumiset&nbsp;›">
            Lue tuoreimmat uutiset
          </PageLink>
          <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
            Kuvia tapahtumista
          </PageLink>
        </aside>
      </CardSection>

      <Divider />

      <FullWidthSection>
        <h6>Yhteistyössä:</h6>
        <SponsorReel>
          <div>
            <Link to="https://new.abb.com/fi/uralle"><img src={ABB} /></Link>
            <Link to="https://www.capgemini.com/"><img src={Capgemini} /></Link>
            <Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus"><img src={Caruna} /></Link>
            <Link to="https://www.eaton.com/us/en-us.html"><img src={Eaton} /></Link>
            <Link to="https://www.ensto.com/fi"><img src={Ensto} /></Link>
            <Link to="https://www.esett.com/"><img src={eSett} /></Link>
            <Link to="https://www.fennovoima.fi/"><img src={Fennovoima} /></Link>
            <Link to="https://www.fingrid.fi/"><img src={Fingrid} /></Link>
            <Link to="https://www.nrcgroup.fi/"><img src={NRCGroup} /></Link>
            <Link to="https://www.okmetic.com/fi/"><img src={Okmetic} /></Link>
            <Link to="https://www.sogeti.com/"><img src={Sogeti} /></Link>
          </div>
          <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
        </SponsorReel>
      </FullWidthSection>
    </main>
  </>
)

export default FrontPageView;