"use client"

import { useEffect, useState } from "react"
import {
  formatMailDate,
  type MailDateDisplayVariant,
} from "@/lib/mail-date"
import { cn } from "@/lib/utils"

type MailDateTextProps = {
  iso: string | undefined
  variant: MailDateDisplayVariant
  className?: string
}

/** Date mail formatée côté client (fuseau navigateur, évite mismatch SSR). */
export function MailDateText({ iso, variant, className }: MailDateTextProps) {
  const [text, setText] = useState("\u00a0")

  useEffect(() => {
    if (!iso?.trim()) {
      setText("—")
      return
    }
    setText(formatMailDate(iso, variant))
  }, [iso, variant])

  return (
    <span className={cn(className)} suppressHydrationWarning>
      {text}
    </span>
  )
}