import { memo, useMemo } from "react"
import { useTranslation } from "react-i18next"
import { Section } from "./style"
import { usePopupContext } from "../index"

export const Footer: React.FC = memo(() => {
  const { t } = useTranslation()
  const { url } = usePopupContext()
  const findStylesURL = useMemo(() => {
    const domain = new URL(url).hostname
    return (
      "https://userstyles.org/styles/browse?search_terms=" +
      encodeURIComponent(domain) +
      "&type=false"
    )
  }, [url])

  return (
    <Section>
      {findStylesURL && (
        <>
          <a href={findStylesURL} target="_blank" rel="noreferrer">
            {t("popup.findStylesForSite")}
          </a>
          <br />
        </>
      )}
      <a href="options.html" target="_blank" rel="noreferrer">
        {t("popup.openManage")}
      </a>
      <br />
    </Section>
  )
})
