import Link from "next/link";
import Image from "next/image";

type RecentPost = {
  image: string;
  title: string;
  date: string;
  dateHref: string;
  postHref: string;
};

const recentPosts: RecentPost[] = [
  {
    image: "/assets/img/services/cathedral.jpeg",
    title: "From 1998 to Posterity: How the Papal Ground Karsana Is Fulfilling Prophecy",
    date: "21 July, 2025",
    dateHref: "/blog",
    postHref: "/blog-details",
  },
  {
    image: "/assets/img/services/cathedral.jpeg",
    title: "How Abuja's Catholic Youth Are Volunteering on the Cathedral Project Site",
    date: "22 July, 2025",
    dateHref: "/blog",
    postHref: "/blog-details",
  },
  {
    image: "/assets/img/services/cathedral.jpeg",
    title: "Where Your Money Goes: A Transparent Breakdown of the Construction Phases",
    date: "23 July, 2025",
    dateHref: "/blog",
    postHref: "/blog-details",
  },
];

const socialLinks = [
  { href: "https://www.facebook.com/", icon: "fab fa-facebook-f" },
  { href: "https://www.twitter.com/", icon: "fab fa-twitter" },
  { href: "https://www.linkedin.com/", icon: "fab fa-linkedin-in" },
  { href: "https://www.whatsapp.com/", icon: "fab fa-whatsapp" },
  { href: "https://www.youtube.com/", icon: "fab fa-youtube" },
];

const contactInfo = [
  {
    icon: "/assets/img/icon/location.svg",
    content: <p className="box-text">Papal Ground, Karsana District, Along Kubwa Expressway, Abuja, FCT, Nigeria.</p>,
  },
  {
    icon: "/assets/img/services/cathedral.jpeg",
    content: (
      <p className="box-text">
        <a href="mailto:info@12apostlescathedral.com" className="box-link">info@12apostlescathedral.com</a>
      </p>
    ),
  },
  {
    icon: "/assets/img/icon/call.svg",
    content: (
      <p className="box-text">
        <a href="tel:+16365414789" className="box-link">+163 6541 4789</a>
      </p>
    ),
  },
];

export default function SideMenu() {
  return (
    <div className="sidemenu-wrapper d-none d-lg-block ">
      <div className="sidemenu-content">
        <button className="closeButton sideMenuCls">
          <i className="far fa-times" />
        </button>

        {/* About */}
        <div className="widget footer-widget">
          <h3 className="widget_title">About Us</h3>
          <div className="th-widget-about">
            <p className="about-text">
              The history of the Cathedral of the Twelve Apostles is a testament to the unwavering faith, visionary leadership, and the relentless pursuit of spiritual growth within our community. From its humble beginnings, the cathedral has evolved into a vibrant center of worship, fellowship, and service, guided by the divine hand of God and the spirit of evangelism.
            </p>
            <div className="th-social">
              {socialLinks.map((s) => (
                <a key={s.href} href={s.href} target="_blank" rel="noopener noreferrer">
                  <i className={s.icon} />
                </a>
              ))}
            </div>
          </div>
        </div>

        {/* Recent Posts */}
        <div className="widget footer-widget">
          <h3 className="widget_title">Recent Posts</h3>
          <div className="recent-post-wrap">
            {recentPosts.map((post) => (
              <div key={post.image} className="recent-post">
                <div className="media-img">
                  <Link href={post.postHref}>
                    <Image src={post.image} alt="Blog Image" width={100} height={100} />
                  </Link>
                </div>
                <div className="media-body">
                  <h4 className="post-title">
                    <Link className="text-inherit" href={post.postHref}>{post.title}</Link>
                  </h4>
                  <div className="recent-post-meta">
                    <Link href={post.dateHref}>{post.date}</Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Contact */}
        <div className="widget footer-widget">
          <h3 className="widget_title">Get In Touch</h3>
          <div className="th-widget-contact">
            {contactInfo.map((info, i) => (
              <div key={i} className="info-box">
                <div className="box-icon">
                  <Image src={info.icon} alt="" width={24} height={24} />
                </div>
                {info.content}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}