import { fetcher } from "@/client/base"
import { IDefaultLayoutPage } from "@/components/layout/default-layout"
import SeoHead from "@/components/layout/seo-head"
import "@/styles/globals.css"
import { ConfigProvider } from "antd"
import koKR from "antd/locale/ko_KR"
import { NextComponentType } from "next"
import type { AppProps } from "next/app"
import Head from "next/head"
import { SWRConfig } from "swr"

export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  const getLayout =
    (Component as IDefaultLayoutPage).getLayout ||
    ((Page: NextComponentType, props: Record<string, unknown>) => <Page {...props} />)

  return (
    <>
      <SeoHead />
      <Head>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
      </Head>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: "#63489a",
            colorLink: "#63489a",
            colorLinkHover: "#7f68a6",
          },
        }}
        locale={koKR}
      >
        <SWRConfig value={{ fetcher }}>
          <main className={`font-sans`}>{getLayout(Component, pageProps)}</main>
        </SWRConfig>
      </ConfigProvider>
    </>
  )
}
