import React, { useMemo } from "react"
import PropTypes from "prop-types"
import { formatUrl } from "./font-loader"

function FontPreview({ font, weight = 400, label, noImport }) {
  const style = { fontFamily: font }
  const fontUrl = useMemo(() => {
    if (!noImport) {
      return formatUrl(font, weight)
    }
  }, [font, weight, noImport])

  return (
    <>
      {fontUrl && <link href={fontUrl} rel="stylesheet" />}
      <div style={style}>{label || font}</div>
    </>
  )
}

FontPreview.propTypes = {
  font: PropTypes.string.isRequired,
  weight: PropTypes.number,
  label: PropTypes.string,
  noImport: PropTypes.bool,
}

export default FontPreview
