"use client"
import Link from "next/link";
import { FaLinkedin } from "react-icons/fa";
import { FaGithub } from "react-icons/fa";
import { MdOutlineMailOutline } from "react-icons/md";
import { PageTransition } from "@/components/PageTransition";
import { useEffect } from "react";
import BackButton from "@/components/BackButton";

export default function ContactPage() {

    // Set the title and metadata on the client side
    useEffect(() => {
      document.title = "Contact | Asher Falcon";
      
      // Set metadata tags
      const metaDescription = document.querySelector('meta[name="description"]');
      if (metaDescription) {
        metaDescription.setAttribute('content', 'Get in touch with Asher Falcon - LinkedIn, GitHub, and email contact information');
      }
      
      // Set Open Graph tags
      let metaOgTitle = document.querySelector('meta[property="og:title"]');
      if (!metaOgTitle) {
        metaOgTitle = document.createElement('meta');
        metaOgTitle.setAttribute('property', 'og:title');
        document.head.appendChild(metaOgTitle);
      }
      metaOgTitle.setAttribute('content', 'Contact | Asher Falcon');
      
      let metaOgDesc = document.querySelector('meta[property="og:description"]');
      if (!metaOgDesc) {
        metaOgDesc = document.createElement('meta');
        metaOgDesc.setAttribute('property', 'og:description');
        document.head.appendChild(metaOgDesc);
      }
      metaOgDesc.setAttribute('content', 'Get in touch with Asher Falcon - LinkedIn, GitHub, and email contact information');
    }, []);

    return (
    <PageTransition>
      <div>
        <div style={{ paddingTop: "50px" }} className="relative flex justify-center items-center h-[50px]">
            <div className="absolute left-0 flex items-center h-full ml-6">
                <BackButton />
            </div>
            <span className="text-xl">Get in touch</span>
        </div>

          <div style={{paddingTop: "50px"}} className="">
              <div className="relative flex justify-center items-center">
                  <Link href="https://www.linkedin.com/in/ashfn/" target="_blank" rel="noopener noreferrer" className="flex items-center space-x-1 ">
                      <FaLinkedin /> <span className="">LinkedIn</span>
                  </Link>
              </div>
              <div className="relative flex justify-center items-center">
                  <Link href="https://github.com/ashfn" target="_blank" rel="noopener noreferrer" className="flex items-center space-x-1 ">
                      <FaGithub /> <span className=""> GitHub</span>
                  </Link>
              </div>
              <div className="relative flex justify-center items-center">
                  <div className="flex items-center space-x-1 ">
                      <MdOutlineMailOutline /> <span className=""> af [at] asherfalcon.com</span>
                  </div>
              </div>
          </div>
      </div>
    </PageTransition>
  );
}