Timeframe Select

'use client'

import * as React from 'react'
import { useMemo } from 'react'
import { Clock } from 'lucide-react'
import { cn } from '@/lib/utils'

export const TIMEFRAME_LABELS: Record<string, string> = {
  '1m': '1m', '3m': '3m', '5m': '5m', '15m': '15m', '30m': '30m',
  '1h': '1h', '2h': '2h', '4h': '4h', '6h': '6h', '12h': '12h',
  '1d': '1d', '1w': '1w', '1M': '1M',
}

export interface TimeframeSelectProps {
  value: string
  onChange: (timeframe: string) => void
  availableTimeframes?: string[]
  floating?: boolean
  className?: string
}

// Compact Clock-icon + native <select> pill. Defaults to all CCXT timeframes;
// pass availableTimeframes to restrict the list. Set floating to absolutely
// position it as a chart overlay (bottom-right).
// See components/trading/timeframe-select.tsx for the full implementation.