import { Global } from '@emotion/react';
import * as React from 'react';
import tw, { css, GlobalStyles as BaseStyles, theme } from 'twin.macro';

const GLOBAL_STYLES = css`
  body {
    ${tw`antialiased font-sans text-base bg-theme-bg text-theme-text`}
  }
`;

const DAY_STYLES = css`
  :root {
    --theme-bg: ${theme`colors.day.bg`};
    --theme-text: ${theme`colors.day.text`};
  }
`;

const NIGHT_STYLES = css`
  :root {
    --theme-bg: ${theme`colors.night.bg`};
    --theme-text: ${theme`colors.night.text`};
  }
`;

export default function GlobalStyle({
  theme = 'day',
}: {
  theme: 'day' | 'night';
}) {
  return (
    <>
      <BaseStyles />
      <Global styles={GLOBAL_STYLES} />
      <Global styles={theme === 'night' ? NIGHT_STYLES : DAY_STYLES} />
    </>
  );
}