---
import { FacebookIcon, InstagramIcon, MailIcon } from '../Icons/Icons';

type Props = {
  displayTitle?: boolean;
};

const { displayTitle = true } = Astro.props;
---

<div class="contact-details">
  {displayTitle && <h4>Contact Us</h4>}
  <ul>
    <li>
      <a
        href="https://www.facebook.com/IECEPUPD"
        target="_blank"
        rel="noopener noreferrer"
      >
        <FacebookIcon client:load />
        <span>UP IECEP</span>
      </a>
    </li>
    <li>
      <a
        href="https://www.instagram.com/upiecep"
        target="_blank"
        rel="noopener noreferrer"
      >
        <InstagramIcon client:load />
        <span>upiecep</span>
      </a>
    </li>
    <li>
      <a
        href="mailto:upiecep@coe.upd.edu.ph"
        target="_blank"
        rel="noopener noreferrer"
      >
        <MailIcon client:load />
        <span>upiecep@coe.upd.edu.ph</span>
      </a>
    </li>
  </ul>
</div>
