import React, { useEffect, useState } from "react"
import { Container } from "@/components"
import Markdown from "@/components/markdown"
import { LICENSES } from "@/constants/licenses"
import * as styles from "./index.module.scss"

const LicensesAgreement: React.FC = () => {
  const [licenses, setLicenses] = useState(LICENSES)
  useEffect(() => {
    setLicenses(
      licenses.replace(/__WEBSITE_URL/g, window?.location?.origin || "")
    )
  }, [])

  return (
    <div className={styles.LicensesAgreement}>
      <Container isSmall={true}>
        <Markdown body={licenses} />
      </Container>
    </div>
  )
}

export default LicensesAgreement