import { X } from 'lucide-react'
import { useLanguage } from '../i18n/LanguageContext'
import { DATE_PRESETS } from '../utils/datePresets'

export default function DatePresetPicker({ onSelect, activePreset, onClear }) {
  const { t } = useLanguage()

  return (
    <div className="flex items-center gap-1.5 flex-wrap">
      {DATE_PRESETS.map(preset => (
        <button
          key={preset.key}
          onClick={() => {
            const { from, to } = preset.getRange()
            onSelect(from, to, preset.key)
          }}
          className={`px-2.5 py-1 text-[11px] font-medium rounded-full border transition-colors ${
            activePreset === preset.key
              ? 'bg-brand-primary/10 border-brand-primary/30 text-brand-primary'
              : 'bg-white border-border text-text-tertiary hover:text-text-primary hover:border-border-dark'
          }`}
        >
          {t(preset.labelKey)}
        </button>
      ))}
      {activePreset && (
        <button
          onClick={onClear}
          className="p-1 text-text-tertiary hover:text-text-primary transition-colors"
          title={t('dates.clearDates')}
        >
          <X className="w-3.5 h-3.5" />
        </button>
      )}
    </div>
  )
}
