import { h, ref, onMounted, onUnmounted, defineComponent } from 'vue';
import type { DashboardModule } from '../types/module';

export const ClockModule: DashboardModule = {
  name: 'clock',
  width: 2,
  height: 1,
  render(params) {
    const label = params.label || 'Local Time';

    return h(defineComponent({
      setup() {
        const time = ref(new Date().toLocaleTimeString());
        let interval: any;
        
        onMounted(() => {
          interval = setInterval(() => {
            time.value = new Date().toLocaleTimeString();
          }, 1000);
        });
        
        onUnmounted(() => {
          clearInterval(interval);
        });
        
        return () => h(
          'div',
          { class: 'w-full h-full flex flex-col items-center justify-center p-5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/10 shadow-lg text-white group cursor-default transition-all' },
          [
            h('span', { class: 'text-sm text-white/50 mb-1 uppercase tracking-widest' }, label),
            h('span', { class: 'text-3xl font-light tracking-tight text-shadow' }, time.value)
          ]
        );
      }
    }));
  }
};