import { html, css, classify } from 'zilk'

  const { TITLE, BUTTON } = classify('Example')

  // 1. Render function (HTML)
  export default ({
    title="Default Title",
    btn_href="https://github.com/m4r-sh/zilk",
    btn_label="Zilk Docs"
  }={}) => html`
    <h1 class=${TITLE}>${title}</h1>
    <a class=${BUTTON} href=${btn_href}>
      <span class=${BUTTON.LABEL}>
        ${btn_label}
      </span>
    </a>
  `

  // 2. Class-based event handlers (JS)
  export let handlers = {
    [BUTTON]: {
      init(){
        console.log('Runs once per element')
      },
      onclick(event){
        console.log('Click event')
      }
    }
  }

  // 3. Class-based styles (CSS)
  export let style = () => css`
    .${TITLE}{
      font-size: 3rem;
      color: #555;
    }
    .${BUTTON}{
      padding: 1rem 0.5rem;
      background: #000;
    }
    .${BUTTON.LABEL}{
      color: #fff;
    }
  `