/**
 * Date Range Picker Component
 * Allows selection of time range for analytics
 */

import { TimeRange } from '../../lib/analytics/types';

interface DateRangePickerProps {
  value: TimeRange;
  onChange: (range: TimeRange) => void;
  showCustom?: boolean;
}

const timeRangeOptions: { value: TimeRange; label: string }[] = [
  { value: '7d', label: 'Last 7 days' },
  { value: '30d', label: 'Last 30 days' },
  { value: '90d', label: 'Last 90 days' },
  { value: '365d', label: 'Last year' },
  { value: 'all', label: 'All time' },
];

export default function DateRangePicker({
  value,
  onChange,
  showCustom = false,
}: DateRangePickerProps) {
  return (
    <div className="flex items-center space-x-2">
      <span className="text-sm text-gray-500">Time range:</span>
      <div className="inline-flex rounded-lg border border-gray-200 bg-white">
        {timeRangeOptions.map((option) => (
          <button
            key={option.value}
            onClick={() => onChange(option.value)}
            className={`px-4 py-2 text-sm font-medium transition-colors first:rounded-l-lg last:rounded-r-lg ${
              value === option.value
                ? 'bg-green-500 text-white'
                : 'text-gray-600 hover:bg-gray-50'
            }`}
          >
            {option.label}
          </button>
        ))}
      </div>
    </div>
  );
}