import { JSX } from 'preact'
import { signal } from '@preact/signals'
import { IS_BROWSER } from '$fresh/runtime.ts'

const count = signal(new Date())

if (IS_BROWSER) {
	setInterval(() => count.value = new Date(), 1000)
}

export function Clock(props: JSX.HTMLAttributes<HTMLSpanElement>) {
	const dt = count.value

	return (
		<span {...props} title={dt.toISOString()}>
			{dt.toLocaleTimeString([], {
				hour: 'numeric',
				minute: '2-digit',
				// second: '2-digit',
			})
				.toLowerCase().replaceAll(' ', '')}
		</span>
	)
}