import merge from "deepmerge";

import baseTheme from "./base";

const theme = { ...baseTheme };

export const createTheme = <
  Theme extends Record<string, unknown>,
  ExtensionTheme extends Record<string, unknown>
>(
  config: Theme,
  extensionConfig?: ExtensionTheme
) => {
  return merge.all([
    { ...baseTheme },
    config,
    extensionConfig || {},
  ]) as typeof baseTheme & Theme & ExtensionTheme;
};

export const mediaQueries = {
  screen: `@media screen`,
  xs: `@media (min-width: ${theme.breakpoints.xs}px)`,
  sm: `@media (min-width: ${theme.breakpoints.sm}px)`,
  md: `@media (min-width: ${theme.breakpoints.md}px)`,
  lg: `@media (min-width: ${theme.breakpoints.lg}px)`,
  supportsHover: `@media (hover:hover)`,
  doesNotSupportHover: `@media (hover:none)`,
};

export default theme;