import { useTranslations } from "next-intl";
import Link from "next/link";
import { socialsConfig } from "./footerConfig";

export default function Socials() {
  const t = useTranslations("footer");
  return (
    <div className="flex flex-col gap-4">
      <h3 className="font-bold text-text text-[12px] md:text-[18px] lg:text-[24px]">
        {t("joinUs")}
      </h3>
      <div className="flex items-center flex-wrap gap-4 lg:gap-[18px]">
        {socialsConfig.map((social) => (
          <Link
            key={social.channel}
            href={social.href}
            className="text-text hover:text-primary-main transition-all"
          >
            <social.Icon className="size-6" />
          </Link>
        ))}
      </div>
    </div>
  );
}