"use client"

import { useEffect, useState } from "react"
import { formatDriveListDate } from "@/lib/drive/drive-date"
import { cn } from "@/lib/utils"

export function DriveListModified({
  iso,
  className,
}: {
  iso: string
  className?: string
}) {
  const [formatted, setFormatted] = useState<{
    short: string
    full: string
    dateTime?: string
  } | null>(null)

  useEffect(() => {
    if (!iso?.trim()) {
      setFormatted({ short: "—", full: "" })
      return
    }
    setFormatted(formatDriveListDate(iso))
  }, [iso])

  if (!formatted?.full) {
    return (
      <span
        className={cn("text-sm text-muted-foreground", className)}
        suppressHydrationWarning
      >
        {formatted?.short ?? "\u00a0"}
      </span>
    )
  }

  return (
    <time
      dateTime={formatted.dateTime}
      title={formatted.full}
      aria-label={formatted.full}
      className={cn("text-sm text-muted-foreground", className)}
      suppressHydrationWarning
    >
      {formatted.short}
    </time>
  )
}