import React, { FunctionComponent } from 'react';
// import './custom-el.scss';

type FactItemProps = {
  label?: string;
  isHere?: boolean;
};

const CustomElement: FunctionComponent<FactItemProps> = ({ label = 'def label', isHere = false }) => {
  return (
    <div className="custom_element">
      <h1>Lorem ipsum</h1>
      <h3>{label}</h3>
      <p className="text_style">here? {isHere && <span>not here</span>}</p>
      {/*https://stackoverflow.com/questions/66011598/styled-jsx-typescript-error-after-migrating-to-monorepo-structure-property-jsx*/}
      <style jsx>{`
        .some_jsx_style {
          width: 300px;
          height: 300px;
          line-height: 300px;
          text-align: center;
          margin: 20px auto;
        }
        h1 {
          color: red;
        }
        .demo-class {
          font-size: 36px;
        }
      `}</style>
    </div>
  );
};

export default CustomElement;