import './TimelineSlider.css';

const STEPS = [
  { value: 'now', label: 'Maintenant' },
  { value: 'h6',  label: '+6h'  },
  { value: 'h12', label: '+12h' },
  { value: 'h24', label: '+24h' },
  { value: 'h48', label: '+48h' },
];

const formatDate = () => new Date().toLocaleDateString('fr-FR', {
  day: '2-digit', month: 'short', year: 'numeric',
});

export default function TimelineSlider({ activeStep, onChange }) {
  return (
    <div className="timeline">
      <span className="timeline__date">{formatDate()}</span>
      <div className="timeline__separator" />
      {STEPS.map((step) => (
        <button
          key={step.value}
          className={`timeline__step ${activeStep === step.value ? 'timeline__step--active' : ''}`}
          onClick={() => onChange(step.value)}
        >
          {step.label}
        </button>
      ))}
    </div>
  );
}
