import Link from "next/link";
import { ExternalLink, MapPinned, Phone } from "lucide-react";

type Props = {
  siteName: string;
  phone: string;
  email: string;
  address: string;
  workingHours: string;
};

const footerLinks = [
  {
    title: "Госуслуги",
    href: "https://www.gosuslugi.ru/",
    icon: "https://www.google.com/s2/favicons?domain=www.gosuslugi.ru&sz=64",
  },
  {
    title: "НМО Минздрава РФ",
    href: "https://edu.rosminzdrav.ru/",
    icon: "https://www.google.com/s2/favicons?domain=edu.rosminzdrav.ru&sz=64",
  },
  {
    title: "Правительство СК",
    href: "https://www.stavregion.ru/",
    icon: "https://www.google.com/s2/favicons?domain=www.stavregion.ru&sz=64",
  },
  {
    title: "ТФОМС",
    href: "https://tfomssk.ru/",
    icon: "https://www.google.com/s2/favicons?domain=spboms.ru&sz=64",
  },
];

const yandexMapsHref =
  "https://yandex.ru/maps/?text=%D0%A1%D1%82%D0%B0%D0%B2%D1%80%D0%BE%D0%BF%D0%BE%D0%BB%D1%8C%2C%20%D1%83%D0%BB%D0%B8%D1%86%D0%B0%20%D0%91%D0%B0%D0%BB%D0%B0%D0%BA%D0%B8%D1%80%D0%B5%D0%B2%D0%B0%2C%205%D0%BA7";

export function SiteFooter({ siteName, phone, email, address, workingHours }: Props) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-panel">
          <div className="footer-tiles">
            {footerLinks.map((item) => (
              <Link
                key={item.title}
                href={item.href}
                className="footer-tile"
                target="_blank"
                rel="noreferrer noopener"
              >
                <span className="footer-tile__main">
                  <span className="footer-tile__icon">
                    <img src={item.icon} alt="" width="20" height="20" loading="lazy" />
                  </span>
                  <span>{item.title}</span>
                </span>
                <ExternalLink size={14} />
              </Link>
            ))}
          </div>

          <div className="footer-bottom">
            <Link
              href={yandexMapsHref}
              className="footer-map"
              target="_blank"
              rel="noreferrer noopener"
            >
              <div className="footer-map__badge">
                <MapPinned size={16} />
                <span>Как нас найти</span>
              </div>
              <div className="footer-map__title">{address}</div>
              <div className="footer-map__meta">{workingHours}</div>
            </Link>

            <div className="footer-contact">
              <strong>{siteName}</strong>
              <div className="footer-meta">{address}</div>
              <div className="footer-meta">{workingHours}</div>
              <a className="footer-contact__phone" href={`tel:${phone.replace(/[^\d+]/g, "")}`}>
                <Phone size={16} />
                <span>{phone}</span>
              </a>
              <div className="footer-meta">{email}</div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}