import { extendTheme, withDefaultColorScheme } from "@chakra-ui/react";
import { Global } from "@emotion/react";
import estedadFont from "../assets/fonts/estedad.woff2?url";

export const theme = extendTheme(
  {
    direction: "rtl",
    styles: {
      global: {
        html: {
          direction: "rtl",
        },
        body: {
          direction: "rtl",
        },
        "*": {
          boxSizing: "border-box",
        },
      },
    },
    fonts: {
      heading: "Estedad",
      body: "Estedad",
    },
  },
  withDefaultColorScheme({ colorScheme: "facebook" }),
);

export const Fonts = () => (
  <Global
    styles={`
      @font-face {
        font-family: Estedad;
        src: url("${estedadFont}") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
    `}
  />
);