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

interface ContactCtaSectionProps {
  heading?: string;
  lead?: string;
  buttonLabel?: string;
  buttonHref?: string;
}

function resolveCompanyContact(
  item: Extract<ContactInfo, { type: "company" }>,
) {
  if (item.contactKey === "phone") {
    return {
      label: companyData.contact.phone.display,
      href: `tel:${companyData.contact.phone.value}`,
    };
  }

  if (item.contactKey === "email") {
    const email = `${companyData.contact.email.user}@${companyData.contact.email.domain}`;

    return {
      label: email,
      href: `mailto:${email}`,
    };
  }

  if (item.contactKey === "openingHours") {
    return {
      label: companyData.contact.openingHours.display,
    };
  }

  return null;
}

export default function ContactCtaSection({
  heading,
  lead,
  buttonLabel,
  buttonHref,
}: ContactCtaSectionProps = {}) {
  const resolvedHeading = heading ?? contactCtaData.heading;
  const resolvedLead = lead ?? contactCtaData.lead;
  const resolvedButtonLabel = buttonLabel ?? contactCtaData.buttonLabel;
  const resolvedButtonHref = buttonHref ?? contactCtaData.buttonHref;
  const { 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}>
                {resolvedHeading}
              </h2>
              <p className={styles.lead}>{resolvedLead}</p>
            </div>
          </div>
          <div>
            <Link href={resolvedButtonHref} className="btn btn--filled-inverse">
              <span className="btn-icon animate" aria-hidden="true">
                <ArrowRightIcon size={16} weight="bold" />
              </span>
              {resolvedButtonLabel}
            </Link>
          </div>
          <hr className={styles.divider} aria-hidden="true" />

          <div className={styles.contactRow}>
            {contacts.map((item) => {
              const icon = (
                <item.icon size={20} weight="regular" aria-hidden="true" />
              );

              if (item.type === "company") {
                const resolved = resolveCompanyContact(item);

                if (!resolved) return null;

                return (
                  <a
                    key={item.contactKey}
                    href={resolved.href}
                    className={styles.contactItem}
                    aria-label={resolved.label}
                  >
                    {icon}
                    {resolved.label}
                  </a>
                );
              }

              if (item.href) {
                return (
                  <a
                    key={item.label}
                    href={item.href}
                    className={styles.contactItem}
                    aria-label={item.label}
                  >
                    {icon}
                    {item.label}
                  </a>
                );
              }

              return (
                <span key={item.label} className={styles.contactItem}>
                  {icon}
                  {item.label}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}