import { Clock } from 'lucide-react';

interface TimeframeSelectorProps {
  selected: string;
  onChange: (timeframe: string) => void;
  disabled?: boolean;
}

export default function TimeframeSelector({
  selected,
  onChange,
  disabled = false,
}: TimeframeSelectorProps) {
  const timeframes = [
    { value: '1min', label: '1M', description: 'Scalping' },
    { value: '5min', label: '5M', description: 'Intraday' },
    { value: '15min', label: '15M', description: 'Intraday' },
    { value: '30min', label: '30M', description: 'Short-term' },
    { value: '60min', label: '1H', description: 'Hourly' },
    { value: '4hour', label: '4H', description: 'Swing' },
    { value: 'daily', label: '1D', description: 'Daily' },
    { value: 'weekly', label: '1W', description: 'Long-term' },
  ];

  return (
    <div className="flex items-center gap-3">
      <div className="flex items-center gap-2">
        <Clock className="w-4 h-4 text-gray-400" />
        <span className="text-sm text-gray-400">Timeframe:</span>
      </div>
      <div className="flex gap-1">
        {timeframes.map((tf) => (
          <button
            key={tf.value}
            onClick={() => onChange(tf.value)}
            disabled={disabled}
            className={`
              px-3 py-1.5 text-sm font-medium rounded transition-colors
              ${
                selected === tf.value
                  ? 'bg-blue-600 text-white'
                  : 'bg-dark-bg text-gray-400 hover:bg-dark-hover hover:text-gray-200'
              }
              ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
            `}
            title={tf.description}
          >
            {tf.label}
          </button>
        ))}
      </div>
    </div>
  );
}
