import { RiDiscordFill, RiDiscussLine, RiGithubFill } from '@remixicon/react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Link from '@/next/link'

type CustomLinkProps = {
  href: string
  children: React.ReactNode
}

const CustomLink = React.memo(({
  href,
  children,
}: CustomLinkProps) => {
  return (
    <Link
      className="flex size-8 cursor-pointer items-center justify-center transition-opacity duration-200 ease-in-out hover:opacity-80"
      target="_blank"
      rel="noopener noreferrer"
      href={href}
    >
      {children}
    </Link>
  )
})

const Footer = () => {
  const { t } = useTranslation()

  return (
    <footer className="relative shrink-0 grow-0 px-12 py-2">
      <h3 className="text-gradient text-xl/tight font-semibold">{t('join', { ns: 'app' })}</h3>
      <p className="mt-1 system-sm-regular text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
      <div className="mt-3 flex items-center gap-2">
        <CustomLink href="https://github.com/langgenius/dify">
          <RiGithubFill className="size-5 text-text-tertiary" />
        </CustomLink>
        <CustomLink href="https://discord.gg/FngNHpbcY7">
          <RiDiscordFill className="size-5 text-text-tertiary" />
        </CustomLink>
        <CustomLink href="https://forum.dify.ai">
          <RiDiscussLine className="size-5 text-text-tertiary" />
        </CustomLink>
      </div>
    </footer>
  )
}

export default React.memo(Footer)