import Link from "next/link";
import styles from "./footer.module.scss";
import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
import { ToTop } from "./ToTop";
import Icon from "../general/Icon";
import {
  getOpeningHours,
  getTodaysOpeningHoursForFunction,
} from "@/lib/openinghours";

async function OpeningHoursTable() {
  const allOpeningHours = await getOpeningHours();
  const subsections = [
    ["glassbaren", "Glassbaren"],
    ["bokcafeen", "Bokcaféen"],
    ["ekspedisjonen", "Ekspedisjonen"],
  ];

  return (
    <table className="openingHours">
      <tbody>
        {subsections.map((subsection) => {
          const [slug, title] = subsection;
          const hours = getTodaysOpeningHoursForFunction(allOpeningHours, slug);
          return (
            <tr key={slug}>
              <td>{title}</td>
              <td>{hours}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export const Footer = () => {
  return (
    <>
    <footer className={styles.footer}>
      <div className={styles.social}>
        <h2 className="suphead">Følg oss</h2>
        <ul>
          <li>
            <a
              href="https://www.instagram.com/studentersamfundet/"
              target="_blank"
              className="button tertiary"
            >
              <span>Instagram</span>
              <Icon type="instagram" />
            </a>
          </li>
          <li>
            <a
              href="https://www.facebook.com/studentersamfundet"
              target="_blank"
              className="button tertiary"
            >
              <span>Facebook</span>
              <Icon type="facebook" />
            </a>
          </li>
          <li>
            <a
              href="https://www.flickr.com/groups/neuf/pool/"
              target="_blank"
              className="button tertiary"
            >
              <span>Flickr</span>
              <Icon type="flickr" />
            </a>
          </li>
        </ul>
      </div>
      <div className={styles.contact}>
        <h2 className="suphead">Kontakt oss</h2>
        <div className={styles.emails}>
          <div>
            Generelle henvendelser
            <br />
            <a href="/#" target="_blank" className={styles.emailLink}>
              post@neuf.no
            </a>
          </div>
          <div>
            Billetter
            <br />
            <a href="/#" target="_blank" className={styles.emailLink}>
              billetter@neuf.no
            </a>
          </div>
          <div>
            <Link href="/kontakt">Øvrig kontaktinfo</Link>
          </div>
        </div>
      </div>
      <div className={styles.visit}>
        <h2 className="suphead">Besøk oss</h2>
        <div className={styles.address}>
          <h2 className="suphead">Adresse</h2>
          <div>
            Chateau Neuf
            <br />
            Slemdalsveien 15
            <br />
            0369 Oslo
            <br />
            <a href="#" target="_blank">
              Vis i Google Maps
            </a>
          </div>
        </div>

        <div className={styles.openingHoursWrapper}>
          <h2 className="suphead">Åpningstider i dag</h2>
          <OpeningHoursTable />
          <Link href="/praktisk#apningstider">Se alle åpningstider</Link>
        </div>
      </div>
      <div className={styles.pig}>
        <NeonChillPig />
      </div>
      <div className={styles.toTop}>
        <ToTop />
      </div>
    </footer>
    <div className={styles.pigPattern}>
      </div>
      </>
  );
};
