"use client"

import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import { trackSocialMediaClick } from "@/utils/tracking"

import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
import type { SocialLinkProps } from "@/types/components/footer/socialLink"
import type { IconName } from "@/types/components/icon"

function SocialIcon({ iconName }: SocialIconsProps) {
  const SocialIcon = getIconByIconName(iconName as IconName)
  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
}

export default function SocialLink({ link }: SocialLinkProps) {
  const { href, title } = link
  return (
    <a
      color="white"
      href={href}
      key={title}
      target="_blank"
      aria-label={title}
      onClick={() => trackSocialMediaClick(title)}
    >
      <SocialIcon iconName={title} />
    </a>
  )
}