"use client";

import { Facebook, Instagram, Send } from "lucide-react";
import { useSettings } from "@/lib/data/settings-provider";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

/**
 * Facebook/Instagram/Telegram, sourced from the App Settings panel
 * (facebook_link/instagram_link/telegram_link — schema_09). These are
 * optional: each icon only renders once an admin has actually filled in
 * that link, so an empty settings row doesn't show a dead button.
 */
export function SocialLinks() {
  const { settings } = useSettings();
  const { t } = useTranslation();

  const links = [
    { label: t("contact.facebook"), href: settings.facebookLink, icon: Facebook },
    { label: t("contact.instagram"), href: settings.instagramLink, icon: Instagram },
    { label: t("contact.telegram"), href: settings.telegramLink, icon: Send },
  ].filter((link) => link.href.trim().length > 0);

  if (links.length === 0) return null;

  return (
    <div>
      <p className="mb-3 text-sm font-medium text-muted">{t("contact.followUs")}</p>
      <div className="flex gap-3">
        {links.map((link) => (
          <a
            key={link.label}
            href={link.href}
            target="_blank"
            rel="noreferrer"
            aria-label={link.label}
            className="flex h-12 w-12 items-center justify-center rounded-2xl glass active:scale-[0.95] transition-transform"
          >
            <link.icon size={19} strokeWidth={2} className="text-gold-dim dark:text-gold-bright" />
          </a>
        ))}
      </div>
    </div>
  );
}