'use client';

import { useTime } from '@/lib/time';

export function TimeToggle({ className = '' }: { className?: string }) {
  const { mode, setMode } = useTime();
  return (
    <div role="radiogroup" aria-label="Time zone" className={`inline-flex overflow-hidden rounded-[4px] border border-line text-[10.5px] tracking-[0.1em] ${className}`}>
      {(['utc', 'local'] as const).map((m) => (
        <button
          key={m}
          type="button"
          role="radio"
          aria-checked={mode === m}
          onClick={() => setMode(m)}
          className={`px-2 py-1 uppercase transition-colors ${mode === m ? 'bg-panel-2 text-ink' : 'text-ink-3 hover:text-ink-2'}`}
        >
          {m}
        </button>
      ))}
    </div>
  );
}