import React, { FC, PropsWithChildren } from 'react'
import { ThemeProvider as PureThemeProvider } from 'styled-components'
import { brandPrimary, breakpointList } from './index'


type BreakpointKey = keyof typeof breakpointList
const breakpoints = {
	up(key: BreakpointKey | number) {
		return `@media (min-width:${typeof key === 'number' ? key : breakpointList[key]}px)`
	},
	down(key: BreakpointKey | number) {
		return `@media (max-width:${typeof key === 'number' ? key : breakpointList[key]}px)`
	},
}

declare module 'styled-components' {
	export interface DefaultTheme {
		brandPrimary: string;
		breakpoints: typeof breakpoints
	}
}

export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
	return (
		<PureThemeProvider
			theme={{
				brandPrimary,
				breakpoints
			}}
		>{children}</PureThemeProvider>
	)
}
