"use client"

import { useClock } from "@/features/home/hooks/use-clock"
import {
  formatDate,
  formatTime,
  getGreeting,
} from "@/features/home/lib/date-time"

export function ClockGreeting() {
  const now = useClock()

  if (!now) {
    return (
      <section className="clock-greeting" aria-label="当前时间">
        <p className="clock-greeting__time" role="timer">
          正在同步时间…
        </p>
        <p className="clock-greeting__date" aria-hidden="true">
          &nbsp;
        </p>
      </section>
    )
  }

  return (
    <section className="clock-greeting" aria-label="当前时间">
      <p className="clock-greeting__time" role="timer" aria-live="off">
        {getGreeting(now.getHours())}，{formatTime(now)}
      </p>
      <p className="clock-greeting__date">{formatDate(now)}</p>
    </section>
  )
}