/** @jsxRuntime classic */
/** @jsx jsx */
import React, { FunctionComponent, useEffect } from 'react';
import { jsx, css, useTheme } from '@emotion/react';

type ThemedProps = {
  label?: string;
};

const Themed: FunctionComponent<ThemedProps> = ({ label = 'def label' }): JSX.Element | null => {
  const theme: any = useTheme();

  useEffect(() => {
    console.log(theme, 'THEME');
  }, [theme]);

  const themeStyles = (theme: any) => css`
    color: ${theme.colors.blue};
  `;

  return <div css={themeStyles(theme)}>some other text: {label}</div>;
};

export default Themed;