'use client';

import { useApp } from '@/lib/context';
import type { TimeRange, TimeMode } from '@/lib/types';

const RANGES: TimeRange[] = ['30m', '1h', '6h', '24h', '7d', '30d'];

export default function TimeRangeSelector() {
  const { timeRange, setTimeRange, timeMode, setTimeMode } = useApp();

  return (
    <div className="flex items-center gap-3 flex-wrap">
      <div className="flex rounded overflow-hidden border border-gray-700">
        {RANGES.map(r => (
          <button
            key={r}
            onClick={() => setTimeRange(r)}
            className={`px-3 py-1 text-sm font-mono transition-colors ${
              timeRange === r
                ? 'bg-indigo-600 text-white'
                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
            }`}
          >
            {r}
          </button>
        ))}
      </div>

      <div className="flex rounded overflow-hidden border border-gray-700">
        {(['real', 'tick'] as TimeMode[]).map(m => (
          <button
            key={m}
            onClick={() => setTimeMode(m)}
            className={`px-3 py-1 text-sm transition-colors ${
              timeMode === m
                ? 'bg-indigo-600 text-white'
                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
            }`}
          >
            {m === 'real' ? 'Real Time' : 'Game Tick'}
          </button>
        ))}
      </div>
    </div>
  );
}