import { relativeTime, absoluteTime } from '../lib/time'

// Tiny clock-arc icon — drawn inline for crisp scaling and theming
export function ClockGlyph({ className = '' }: { className?: string }) {
  return (
    <svg viewBox="0 0 12 12" className={className} fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round">
      <circle cx="6" cy="6" r="4.5" />
      <path d="M6 3.5 V6 L7.5 7.5" />
    </svg>
  )
}

// Single timestamp display — monospace, tabular, with hover-revealed absolute time
export function TimeStamp({ iso, label, className = '' }: { iso: string; label?: string; className?: string }) {
  return (
    <span className={`inline-flex items-baseline gap-1 font-mono text-[10px] tabular tracking-tight ${className}`} title={absoluteTime(iso)}>
      {label && <span className="text-gray-400 dark:text-gray-500 uppercase">{label}</span>}
      <span>{relativeTime(iso)}</span>
    </span>
  )
}

// A row of labeled metadata pairs — used in plan/task headers
export function MetaRow({ items }: { items: { label: string; value: string; iso?: string }[] }) {
  return (
    <div className="flex flex-wrap items-baseline gap-x-5 gap-y-2 font-mono text-[10px] tabular">
      {items.map((item, i) => (
        <div key={i} className="flex items-baseline gap-1.5" title={item.iso ? absoluteTime(item.iso) : undefined}>
          <span className="text-gray-400 dark:text-gray-500 uppercase tracking-wider">{item.label}</span>
          <span className="text-gray-900 dark:text-gray-100">{item.value}</span>
        </div>
      ))}
    </div>
  )
}
