<template>
  <div class="clock-container">
    <div class="time">{{ currentTime }}</div>
    <div class="date">{{ currentDate }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const currentTime = ref('');
const currentDate = ref('');
let timerId: number;

const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  currentDate.value = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
  }).format(now);
};

onMounted(() => {
  updateTime();
  timerId = window.setInterval(updateTime, 1000);
});

onUnmounted(() => {
  clearInterval(timerId);
});
</script>

<style lang="scss" scoped>

@import '@/styles/tokens.scss';

.clock-container {
  text-align: center;
  margin-bottom: var(--clock-margin-bottom);
  color: $color-text-primary;
  text-shadow: $shadow-md;
}

.time {
  font-size: var(--clock-time-font-size);
  font-weight: 600;
  letter-spacing: var(--clock-letter-spacing);
}

.date {
  font-size: var(--clock-date-font-size);
  color: $color-text-secondary;
  margin-top: var(--clock-date-margin-top);
}
</style>
