import { siBluesky, siX, siFacebook, siReddit } from 'simple-icons'
import { ExternalLink } from '@/components/common/ExternalLink'

type ShareLinksProps = {
  url: string
  title: string
  description?: string
}

export function ShareLinks({ url, title, description }: ShareLinksProps) {
  const shareText = `Check out this post: ${title} - ${description}\n\n${url}`

  const networks = [
    {
      name: 'Bluesky',
      icon: siBluesky,
      href: `https://bsky.app/intent/compose?text=${encodeURIComponent(shareText)}`,
    },
    {
      name: 'X',
      icon: siX,
      href: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`,
    },
    {
      name: 'Facebook',
      icon: siFacebook,
      href: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
    },
    {
      name: 'Reddit',
      icon: siReddit,
      href: `https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(
        title,
      )}&text=${encodeURIComponent(description ?? '')}`,
    },
  ]

  return (
    <div className="flex gap-4 mx-auto">
      {networks.map(({ name, icon, href }) => (
        <ExternalLink key={name} href={href}>
          <svg
            dangerouslySetInnerHTML={{ __html: icon.svg }}
            className="inline-block w-6 h-6 mr-1 fill-current hover:text-accent transition-colors"
          />
        </ExternalLink>
      ))}
    </div>
  )
}