import { Download, Mail, Phone, Send } from "lucide-react";
import { useTranslations } from "next-intl";

const downloadCatalog = () => {
  const link = document.createElement("a");
  link.href = "/catalog.pdf";
  link.download = "catalog.pdf";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

export default function UpHeader() {
  const t = useTranslations();
  return (
    <div className="w-full border-b border-gray-400/50">
      <div className="max-w-7xl mx-auto py-2 px-4 sm:px-6 lg:px-8 flex max-[450px]:flex-col justify-between gap-2 items-center">
        <div className="flex items-center gap-2">
          <p className="text-white font-medium">{t("navbar.connect")}:</p>
          <div className="flex items-center gap-3">
            <a
              href="mailto:support@fireforce.com"
              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
            >
              <Mail size={20} />
            </a>
            <a
              href="tel:+998773722121"
              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
            >
              <Phone size={20} />
            </a>
            <a
              href="https://t.me/ignum_tech"
              className="p-1 rounded-sm  text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
            >
              <Send size={20} />
            </a>
          </div>
        </div>
        <button
          onClick={downloadCatalog}
          className="py-1 px-4 flex items-center gap-2 hover:bg-red-700 hover:cursor-pointer hover:border-red-700 text-white font-medium border border-white rounded-md transition"
        >
          <Download size={18} />
          {t("navbar.catalog")}
        </button>
      </div>
    </div>
  );
}