import React, { FC, PropsWithChildren } from 'react'
import { createUseStyles } from 'react-jss'

import BriosoProItalic from '../../assets/fonts/BriosoPro-Italic.otf'
import SFProTextRegular from '../../assets/fonts/SF-Pro-Display/SF-Pro-Display-Regular.otf'
import SFProTextMedium from '../../assets/fonts/SF-Pro-Text/SF-Pro-Text-Medium.ttf'
import SFProText from '../../assets/fonts/SF-Pro-Text/SF-Pro-Text-Regular.otf'
import { ThemeProps } from '../../themes'

export const useStyles = createUseStyles(({ globalStyles }: ThemeProps) => ({
  '@font-face': [
    {
      fontFamily: 'SF Pro Text',
      src: `url('${SFProText}') format("opentype")`,
      fontDisplay: 'swap',
      fontWeight: 400,
    },

    {
      fontFamily: 'SF Pro Text',
      src: `url(${SFProTextMedium})`,
      fontDisplay: 'swap',
      fontWeight: 600,
    },

    {
      fontFamily: 'SF Pro Display',
      src: `url(${SFProTextRegular}) format("opentype")`,
      fontDisplay: 'swap',
    },

    {
      fontFamily: 'BriosoPro',
      src: `url(${BriosoProItalic}) format("opentype")`,
      fontDisplay: 'swap',
    },
  ],

  '@global': globalStyles,
}))

const CommonStyles: FC<PropsWithChildren> = ({ children }) => {
  useStyles()
  return <>{children}</>
}

export default CommonStyles
