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

const DoseSchedule = ({ doses, doseIncrement, onUpdateDoses, t }) => {
  return (
    <div className="bg-white p-5 rounded-lg shadow-sm border">
      <h2 className="text-xl font-semibold mb-4 text-gray-700">{t.myPlan}</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))}
            errorMessage={t.timeRequired}
          />
          <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={t.mg}
              errorMessage={t.fieldRequired}
            />
          </div>
          <span className="text-gray-600 text-sm flex-1">{t[dose.label] || dose.label}</span>
        </div>
      ))}
    </div>
  );
};

export default DoseSchedule;