"use client"

import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"

import { trackSocialMediaClick } from "@/utils/tracking"

import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"

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

function SocialIcon({ iconName }: SocialIconsProps) {
  const SocialIcon = (
    <IconByIconName iconName={iconName} color="Icon/Inverted" />
  )
  return SocialIcon ? SocialIcon : <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 as IconName} />
    </a>
  )
}