import Link from "next/link";
export type SocialLinks = {
  facebookText?: string | null;
  facebookLink?: string | null;
  instagramText?: string | null;
  instagramLink?: string | null;
  xText?: string | null;
  xLink?: string | null;
  linkedinText?: string | null;
  linkedinLink?: string | null;
  youtubeText?: string | null;
  youtubeLink?: string | null;
  telegramText?: string | null;
  telegramLink?: string | null;
  whatsappText?: string | null;
  whatsappLink?: string | null;
};

export type FollowUsData = {
  followSubtitle?: string | null;
  followTitle?: string | null;
  socialLinks?: SocialLinks | null;
};

type Props = {
  data: FollowUsData;
};

export default function FollowUs({ data }: Props) {
  const links = [
    { text: data.socialLinks?.facebookText, href: data.socialLinks?.facebookLink },
    { text: data.socialLinks?.instagramText, href: data.socialLinks?.instagramLink },
    { text: data.socialLinks?.xText, href: data.socialLinks?.xLink },
    { text: data.socialLinks?.linkedinText, href: data.socialLinks?.linkedinLink },
    { text: data.socialLinks?.youtubeText, href: data.socialLinks?.youtubeLink },
    { text: data.socialLinks?.telegramText, href: data.socialLinks?.telegramLink },
    { text: data.socialLinks?.whatsappText, href: data.socialLinks?.whatsappLink },
  ].filter(
    (item): item is { text: string; href: string } =>
      typeof item.text === "string" &&
      item.text.trim() !== "" &&
      typeof item.href === "string" &&
      item.href.trim() !== ""
  );

  if (!data.followTitle && !data.socialLinks) {
    return null;
  }

  return (
    <section className="py-24 bg-white">
      <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">

        {/* LEFT */}
        <div>
          {data.followSubtitle && (
            <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
              {data.followSubtitle}
            </span>
          )}
          
          {data.followTitle && (
            <h2 className="font-mono font-medium text-3xl md:text-4xl lg:text-4xl text-[#202020] leading-tight max-w-md">
              {data.followTitle}
            </h2>
          )}
        </div>

        {/* RIGHT – TAGS */}
        <div className="flex flex-wrap gap-3 md:justify-center">
          {links.map((item, index) => (
            <Link
              key={index}
              href={item.href}
              target="_blank"
              rel="noopener noreferrer"
              className="border border-dashed border-[#000000] px-4 py-2 rounded text-lg text-[#202020] font-medium hover:bg-[#101010] hover:text-white transition"
            >
              {item.text}
            </Link>
          ))}
        </div>

      </div>
    </section>
  );
}