import { useRouter } from 'next/router'
import cx from 'classnames'

import { useGlobals } from '@/lib/globals'

import type { Props as IconProps } from '@/components/shared/Icon'
import Icon from '@/components/shared/Icon'

type Social = {
  label: string
  icon: IconProps['name']
  url: string
  size: string
}

type Props = {
  title: string
  excerpt?: string
  image?: string
  accentColor: string
}

export default function SocialShare({ title, excerpt, image, accentColor }: Props) {
  const router = useRouter()
  const { settings } = useGlobals()
  const url = `${process.env.NEXT_PUBLIC_SITE_URL}${router.asPath}`
  const shareTitle = `${settings.title} - ${title}`

  const buildShareUrl = (base: string, params: Record<string, string>) => {
    return `${base}?${new URLSearchParams(params).toString()}`
  }

  const socials: Social[] = [
    {
      label: 'Facebook',
      icon: 'facebook',
      url: buildShareUrl('https://www.facebook.com/sharer/sharer.php', {
        u: url,
      }),
      size: 'w-3',
    },
    {
      label: 'Twitter',
      icon: 'twitter',
      url: buildShareUrl('https://twitter.com/intent/tweet', {
        text: shareTitle,
        url: url,
      }),
      size: 'w-5',
    },
    // { label: 'Instagram',icon: 'instagram', url: 'https://instagram.com', size: 'w-5' },
    {
      label: 'LinkedIn',
      icon: 'linkedin',
      url: buildShareUrl('https://www.linkedin.com/sharing/share-offsite', {
        url: url,
      }),
      size: 'w-5',
    },
    {
      label: 'Pinterest',
      icon: 'pinterest',
      url: buildShareUrl('https://www.pinterest.com/pin/create/button', {
        url: url,
        media: image || '',
        description: excerpt || '',
      }),
      size: 'w-4',
    },
  ]

  return (
    <ul className={cx('flex flex-wrap gap-1 items-center px-6 py-8', accentColor && `bg-accent-${accentColor}`)}>
      <li className="w-full xs:w-auto pr-2 uppercase">Share</li>
      {socials.map(social => (
        <li key={social.label}>
          <a
            href={social.url}
            target="_blank"
            rel="noreferrer"
            className="group flex relative justify-center items-center w-9 h-9 "
          >
            <span className="sr-only">{social.label}</span>

            <Icon
              name={social.icon}
              className={cx(
                `relative ${social.size} group-hover:text-black transition-colors z-1`,
                accentColor && `text-accent-${accentColor}`
              )}
            />

            <span className="block absolute inset-0 bg-black scale-x-100 group-hover:scale-x-0 transition-transform z-0" />
          </a>
        </li>
      ))}
    </ul>
  )
}