import React from 'react';
import TimeInput from './TimeInput.js';
import NumericInput from './NumericInput.js';

const DoseSchedule = ({ doses, doseIncrement, onUpdateDoses }) => {
  return (
    <div className="bg-white p-5 rounded-lg shadow-sm border">
      <h2 className="text-xl font-semibold mb-4 text-gray-700">Mein Plan</h2>
      {doses.map((dose, index) => (
        <div key={index} className="flex items-center space-x-3 mb-3">
          <TimeInput
            value={dose.time}
            onChange={newTime => onUpdateDoses(doses.map((d, i) => i === index ? {...d, time: newTime} : d))}
          />
          <div className="w-40">
            <NumericInput
              value={dose.dose}
              onChange={newDose => onUpdateDoses(doses.map((d, i) => i === index ? {...d, dose: newDose} : d))}
              increment={doseIncrement}
              min={0}
              unit="mg"
            />
          </div>
          <span className="text-gray-600 text-sm flex-1">{dose.label}</span>
        </div>
      ))}
    </div>
  );
};

export default DoseSchedule;