import type { FC } from 'react'
import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'

import { FacebookIcon } from '~/components/icons/facebook'
import { InstagramIcon } from '~/components/icons/instagram'
import { LinkIcon } from '~/components/icons/link-icon'
import { LinkedinIcon } from '~/components/icons/linkedin'
import { XIcon } from '~/components/icons/x'

interface SocialMediaProperties {
  className?: string
}

const dataSocialMedia = [
  {
    type: 'link',
    url: 'post-id/',
    icon: LinkIcon,
  },
  {
    type: 'facebook',
    url: 'https://facebook.com/',
    icon: FacebookIcon,
  },
  {
    type: 'linkedin',
    url: 'https://linkedin.com/',
    icon: LinkedinIcon,
  },
  {
    type: 'x',
    url: 'https://x.com/',
    icon: XIcon,
  },
  {
    type: 'instagram',
    url: 'https://instagram.com/',
    icon: InstagramIcon,
  },
]

const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
  return (
    <div className={twMerge('flex gap-2', className)}>
      {dataSocialMedia.map(({ url, icon: Icon }, index) => (
        <Link
          key={index}
          to={url}
          target="_blank"
          rel="noopener noreferrer"
        >
          <Icon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
        </Link>
      ))}
    </div>
  )
}

export default IconsSocial