import Link from "next/link";
import { portfolioContent, sharedProfile, type Language } from "@/data/portfolio";

export function Footer({ language }: { language: Language }) {
  const dir = language === "ar" ? "rtl" : "ltr";
  const t = portfolioContent[language];
  const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;

  return (
    <footer className="py-10">
      <div className="site-container">
        <div className="editorial-rule" />
      </div>
      <div
        className={`site-container flex flex-col gap-6 py-8 md:flex-row md:items-end ${
          dir === "rtl" ? "md:flex-row-reverse md:justify-between" : "md:justify-between"
        }`}
      >
        <div className={dir === "rtl" ? "text-right" : ""}>
          <p className="type-footer-brand display-face text-[var(--color-ink)]">{brandName}</p>
          <p className="type-chip mt-2 max-w-md text-[var(--color-muted)]">{t.footer}</p>
        </div>

        <div
          className={`type-chip flex flex-col gap-2 text-[var(--color-muted)] ${
            dir === "rtl" ? "md:items-start text-right" : "md:items-end"
          }`}
        >
          <Link
            href={`mailto:${sharedProfile.email}`}
            dir="ltr"
            className="data-ltr hover:text-[var(--color-blue-500)]"
          >
            {sharedProfile.email}
          </Link>
          <Link
            href={`tel:${sharedProfile.phone.replace(/\s+/g, "")}`}
            dir="ltr"
            className="data-ltr hover:text-[var(--color-blue-500)]"
          >
            {sharedProfile.phone}
          </Link>
          <p>{t.ui.selectedWorks}</p>
        </div>
      </div>
    </footer>
  );
}