import ecreIcons from '../../../components/core/icons';
import { translate } from '../../../Helper';

const SelectTimeFilter = ({ timeFilter, onTimeFilterChange, options = [] }) => {
  const defaultOptions = [
    { value: 'All Time', label: translate('all_time') },
    { value: '1 Month', label: translate('one_month') },
    { value: '3 Month', label: translate('three_month') },
    { value: '6 Month', label: translate('six_month') },
    { value: '1 Year', label: translate('one_year') }
  ];

  const filterOptions = options.length > 0 ? options : defaultOptions;

  return (
    <div className="ecre-relative">
      <select 
        value={timeFilter} 
        onChange={(e) => onTimeFilterChange(e.target.value)}
        className="!ecre-appearance-none !ecre-bg-none !ecre-shadow-none !ecre-px-4 !ecre-py-2 !ecre-pr-8 !ecre-border !ecre-border-gray-200 !ecre-rounded !ecre-text-sm !ecre-text-gray-900 focus:ecre-outline-none ecre-bg-white"
      >
        {filterOptions.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <span className="ecre-absolute ecre-right-2 ecre-top-1/2 ecre-transform -ecre-translate-y-1/2 ecre-text-gray-900 ecre-w-5 ecre-h-5 ecre-pointer-events-none">{ecreIcons.angleDown}</span>
    </div>
  );
};

export default SelectTimeFilter;