"use client";

import type { SocialLink } from "@/types/models";
import { SocialPlatformIcon } from "@/components/icons/SocialPlatformIcon";
import { cn } from "@/lib/cn";

export function SocialLinks({
  links,
  className,
  buttonClassName,
  emptyMessage = "Henüz sosyal medya bağlantısı eklenmedi.",
}: {
  links: SocialLink[];
  className?: string;
  buttonClassName?: string;
  emptyMessage?: string;
}) {
  const valid = links.filter((s) => s.url?.trim() && s.url !== "https://");

  if (valid.length === 0) {
    return <p className="text-sm text-[var(--muted)]">{emptyMessage}</p>;
  }

  return (
    <div className={cn("flex flex-wrap gap-2", className)}>
      {valid.map((s) => (
        <a
          key={s.id}
          href={s.url}
          target="_blank"
          rel="noopener noreferrer"
          title={s.platform}
          className={cn(
            "inline-flex h-10 w-10 items-center justify-center rounded-full border border-black/5 bg-white text-[var(--navy)] shadow-sm transition hover:border-[var(--gold)] hover:text-[var(--gold-dark)]",
            buttonClassName
          )}
          aria-label={s.platform}
        >
          <SocialPlatformIcon platform={s.platform} url={s.url} className="h-[18px] w-[18px]" />
        </a>
      ))}
    </div>
  );
}