"use client";

import Link from "next/link";
import { useEffect, useRef } from "react";
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
import styles from "./ContactCtaSection.module.css";
import { contactCtaData, type ContactInfo } from "./ContactCtaData";

function ObfuscatedLink({ item }: { item: ContactInfo }) {
  const ref = useRef<HTMLAnchorElement>(null);

  useEffect(() => {
    if (!ref.current) return;

    if (item.obfuscated?.tel) {
      ref.current.href = `tel:${item.obfuscated.tel}`;
    } else if (item.obfuscated?.user && item.obfuscated?.domain) {
      ref.current.href = `mailto:${item.obfuscated.user}@${item.obfuscated.domain}`;
    }
  }, [item.obfuscated]);

  const Icon = item.icon;

  return (
    <a ref={ref} href="#" className={styles.contactItem}>
      <Icon size={20} weight="regular" aria-hidden="true" />
      {item.label}
    </a>
  );
}

export default function ContactCtaSection() {
  const { heading, lead, buttonLabel, buttonHref, contacts } = contactCtaData;

  return (
    <section className={styles.section} aria-labelledby="contact-cta-heading">
      <div className={styles.inner}>
        <div className={styles.card}>
          <div className={styles.top}>
            <div className={styles.text}>
              <h2 id="contact-cta-heading" className={styles.heading}>
                {heading}
              </h2>
              <p className={styles.lead}>{lead}</p>
            </div>

            <Link href={buttonHref} className="btn btn--filled-inverse">
              <span className="btn-icon animate" aria-hidden="true">
                <ArrowRightIcon size={16} weight="bold" />
              </span>
              {buttonLabel}
            </Link>
          </div>

          <hr className={styles.divider} aria-hidden="true" />

          <div className={styles.contactRow}>
            {contacts.map((item: ContactInfo) =>
              item.obfuscated ? (
                <ObfuscatedLink key={item.label} item={item} />
              ) : (
                <span key={item.label} className={styles.contactItem}>
                  <item.icon size={20} weight="regular" aria-hidden="true" />
                  {item.label}
                </span>
              ),
            )}
          </div>
        </div>
      </div>
    </section>
  );
}