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

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>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.tiktok.com/@studentersamfund"
                target="_blank"
                className="button tertiary"
              >
                <span>TikTok</span>
                <Icon type="tiktok" />
              </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>Kontakt oss</h2>
          <div className={styles.emails}>
            <div>
              <h3>Generelle henvendelser</h3>
              <a
                href="mailto:post@neuf.no"
                className={styles.emailLink}
              >
                post@neuf.no
              </a>
            </div>
            <div>
              <h3>Billetter</h3>
              <a
                href="mailto:billetter@neuf.no"
                className={styles.emailLink}
              >
                billetter@neuf.no
              </a>
            </div>
            <div>
              <Link href="/kontakt">
                Øvrig kontaktinfo&nbsp;
                <Icon type="arrowRight" />
              </Link>
            </div>
          </div>
        </div>
        <div className={styles.visit}>
          <h2>Besøk oss</h2>
          <div className={styles.visitContent}>
            <div className={styles.address}>
              <h3>Adresse</h3>
              <div>
                Chateau Neuf
                <br />
                Slemdalsveien 15
                <br />
                0369 Oslo
                <br />
                <a href="#" target="_blank">
                  Vis i Google Maps&nbsp;
                  <Icon type="externalLink" />
                </a>
              </div>
            </div>

            <div className={styles.openingHoursWrapper}>
              <h3>Åpningstider i dag</h3>
              <OpeningHoursTable />
              <Link href="/praktisk#apningstider">
                Se alle åpningstider&nbsp;
                <Icon type="arrowRight" />
              </Link>
            </div>
          </div>
        </div>
        {/* <div className={styles.pig}>
          <NeonChillPig />
        </div> */}
      </footer>
      <PigPattern />
    </>
  );
};