import React from 'react';
import { FiExternalLink } from 'react-icons/fi';
import shared from '../../styles/Shared.module.scss';
import styles from '../../styles/Program.module.scss';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';

const Program = () => {
  return (
    <section className={shared.page}>
      <h1 id='program-start'>Ohjelma</h1>

      <p className={styles.programTimeAndPlace}>
        Perjantai 12.6. klo 18-21 <span className={styles.locationName}>Velkuanmaa</span>
      </p>
      <h2 className={styles.placeTitle}>
        <a href='https://www.vaihela.fi/'>
          <span className={styles.placeName}>Saaristohotelli Vaihela</span>
        </a>
      </h2>
      <ul className={styles.performerList}>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>18.00:</span>
          <span className={styles.programPerformer}>Katariina Vuorinen ja Pekka Tolonen</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>18.30:</span>
          <span className={styles.programPerformer}>Outi-Illuusia Parviainen</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>19.00:</span>
          <span className={styles.programPerformer}>Juha Kulmala & Jumbo!</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>20.00:</span>
          <span className={styles.programPerformer}>Pegasos</span>
        </li>
      </ul>
      <hr className={styles.programHr} />

      <p className={styles.programTimeAndPlace}>
        Lauantai 13.6. klo 15-21 <span className={styles.locationName}>Teersalo</span>
      </p>
      <h2 className={styles.placeTitle}>
        <a href='https://prosinervo.com/'>
          <span className={styles.placeName}>Sinervon talo</span>
        </a>
      </h2>
      <ul className={styles.performerList}>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>15.00:</span>
          <span className={styles.programPerformer}>Olli Heikkonen</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>15.20:</span>
          <span className={styles.programPerformer}>Helena Sinervo</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>15.40:</span>
          <span className={styles.programPerformer}>Laakso ja Siljamäki</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>16.10:</span>
          <span className={styles.programPerformer}>Zoila Forss Crespo-Moreyra</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>16.30:</span>
          <span className={styles.programPerformer}>Saila Susiluoto ja Markku Pääskynen</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>16.50:</span>
          <span className={styles.programPerformer}>Jouni Inkala</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>17.10:</span>
          <span className={styles.programPerformer}>Häivä</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>18.00:</span>
          <span className={styles.programPerformer}>Olli Sinivaara</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>18.20:</span>
          <span className={styles.programPerformer}>Katariina Vuorinen & Pekka Tolonen</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>18.40:</span>
          <span className={styles.programPerformer}>Tommi Parkko</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>19.00:</span>
          <span className={styles.programPerformer}>Djangomania (ja open mic)</span>
        </li>
        <li className={styles.performerWithTime}>
          <span className={styles.programTime}>20.00:</span>
          <span className={styles.programPerformer}>Juurakko</span>
        </li>
      </ul>
      {/* <ul className={styles.performerList}>
        <li>Santtu Puukka</li>
        <li>Maaria Päivinen</li>
        <li>Silja Järventausta</li>
        <li>Tiina Lehikoinen</li>
        <li>Katariina Vuorinen</li>
        <li>Panu Hämeenaho</li>
        <li>Uhrijuhla</li>
        <li>Djangomania</li>
        <li>Milagros Corcuera</li>
      </ul> */}

      <hr className={styles.programHr} />

    </section>
  );
};

export default Program;
