import { createSignal, onCleanup } from 'solid-js'

import './NewTab.css'

export const NewTab = () => {
  const getTime = () => {
    const date = new Date()
    const hour = String(date.getHours()).padStart(2, '0')
    const minute = String(date.getMinutes()).padStart(2, '0')
    return `${hour}:${minute}`
  }

  const [time, setTime] = createSignal(getTime())
  const link = 'https://github.com/guocaoyi/create-chrome-ext'

  let interval = setInterval(() => {
    setTime(getTime())
  }, 1000)

  onCleanup(() => clearInterval(interval))

  return (
    <section>
      <span></span>
      <h1>{time()}</h1>
      <a href={link} target="_blank">
        generated by create-chrome-ext
      </a>
    </section>
  )
}

export default NewTab