"use client";

import { useEffect, useState } from "react";
import { Mail, Phone, Send } from "lucide-react";
import { fetchLinks, FALLBACK_LINKS, type SiteLinks } from "@/lib/links";

export function SupportContact() {
  const [links, setLinks] = useState<SiteLinks>(FALLBACK_LINKS);
  useEffect(() => {
    let on = true;
    fetchLinks().then((l) => on && setLinks(l));
    return () => {
      on = false;
    };
  }, []);

  const email = links.supportEmail || FALLBACK_LINKS.supportEmail;

  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <a href={`mailto:${email}`} className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
        <Mail className="text-gold" /> <span>{email}</span>
      </a>
      {links.supportPhone && (
        <a href={`tel:${links.supportPhone}`} className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
          <Phone className="text-gold" /> <span dir="ltr">{links.supportPhone}</span>
        </a>
      )}
      {links.telegram && (
        <a href={links.telegram} target="_blank" rel="noopener" className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
          <Send className="text-teal" /> <span>تلگرام پشتیبانی</span>
        </a>
      )}
      {links.instagram && (
        <a href={links.instagram} target="_blank" rel="noopener" className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
          <span className="text-lg">📷</span> <span>اینستاگرام</span>
        </a>
      )}
    </div>
  );
}