import { useGlobals } from '@/lib/globals'
import Icon from '@/components/shared/Icon'
import { Props as IconProps } from '@/components/shared/Icon'

type Props = {
  title: string
  containerStyles?: string
}

export default function SocialLinks({ title, containerStyles }: Props) {
  const { socialLinks } = useGlobals()

  return (
    <div className={containerStyles}>
      <div className="pr-2 pb-1 uppercase">{title}</div>
      <ul className="flex flex-wrap gap-1 items-center">
        {Object.keys(socialLinks).map(key => (
          <li key={socialLinks[key]}>
            <a
              href={socialLinks[key]}
              target="_blank"
              className="group flex relative justify-center items-center w-9 h-9"
              rel="noreferrer"
            >
              <span className="sr-only">{socialLinks[key]}</span>
              <Icon
                name={key as IconProps['name']}
                className={`relative w-[20px] h-[20px] text-white group-hover:text-black transition-colors z-1`}
              />
              <span className="block absolute inset-0 bg-black scale-x-100 group-hover:scale-x-0 transition-transform z-0" />
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}