import { value, component, div, h1, p, button, scope } from '../lib/exports';

const counter = value(0);

const child = component<{ count: number }>(({ context, props }) => {
  const count = context(counter);

  return div`
    And the count according to the child: ${count.value} which got ${props.count}

    ${button.$({
      click: () => {
        count.value -= 1;
      },
    })`
      Decrement
    `}
  `;
});

const root = component(({ context }) => {
  const count = context(counter);

  return div`
    ${h1.$({ style: { color: 'red' } })`
      Hello
    `}

    The current count is: ${count.value}

    ${div`
      ${h1`Hello`}
      
      ... Something

      ${p`
        Testing
      `}
    `}

    ${button.$({
      click: () => {
        count.value += 1;
      },
    })`
      Increment
    `}
    
    ${div`
      ${h1`With prop`}
      ${child({ count: count.value })}
    `}

    ${div`
      ${h1`Without prop`}
      ${child}
    `}

    ${scope(counter)`
      ${h1`Without scope`}
      ${child}
    `}

    So long and thanks for all the fish
  `;
});

document.body.appendChild(root.toHtmlElement());