import {css} from '@tesseract-design/goofy-goober';

const getClassName = (borderColor?: string) => css.cx(
  css`
    padding: 1rem;
  `,
  css.nest('.child-class')(
    css`
      color: red;
    `,
  ),
  css.media('(min-width: 600px)')(
    css`
      padding: 2rem;
    `,
  ),
  css.if(typeof borderColor === 'string')(
    css`
      border-width: 1px;
      border-style: solid;
    `
  ),
  css.dynamic({
    'border-color': borderColor,
  }),
)

export default function Home() {
  return (
    <div className={getClassName('red')}>
      <div className="child-class">
        Hello World
      </div>
    </div>
  )
}