"use client";

import { MessageCircle, Phone, Mail } from "lucide-react";
import { useSettings } from "@/lib/data/settings-provider";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

/** "0300 1234567" -> "923001234567", for wa.me / tel: links. */
function toIntlDigits(pk: string): string {
  const digits = pk.replace(/\D/g, "");
  return digits.startsWith("0") ? "92" + digits.slice(1) : digits;
}

/**
 * The WhatsApp/Call/Email contact list, sourced from the App Settings
 * panel's whatsapp_number/support_phone/support_email — used on both the
 * Help page and the Contact Us page so the numbers only live in one place.
 */
export function ContactOptions() {
  const { settings } = useSettings();
  const { t } = useTranslation();

  const options = [
    {
      label: t("help.whatsapp"),
      sub: settings.whatsappNumber,
      icon: MessageCircle,
      href: `https://wa.me/${toIntlDigits(settings.whatsappNumber)}`,
    },
    {
      label: t("help.call"),
      sub: settings.supportPhone,
      icon: Phone,
      href: `tel:+${toIntlDigits(settings.supportPhone)}`,
    },
    {
      label: t("help.email"),
      sub: settings.supportEmail,
      icon: Mail,
      href: `mailto:${settings.supportEmail}`,
    },
  ];

  return (
    <div className="flex flex-col gap-3">
      {options.map((opt) => (
        <a
          key={opt.label}
          href={opt.href}
          target="_blank"
          rel="noreferrer"
          className="flex items-center gap-3 rounded-4xl glass px-4 py-3.5 active:scale-[0.985] transition-transform"
        >
          <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gold/15">
            <opt.icon size={18} strokeWidth={2} className="text-gold-dim dark:text-gold-bright" />
          </span>
          <div>
            <p className="text-sm font-semibold">{opt.label}</p>
            <p className="text-xs text-muted">{opt.sub}</p>
          </div>
        </a>
      ))}
    </div>
  );
}