import FormSelect from '../components/FormSelect';
import FormCheckboxes from '../components/FormCheckboxes';

function GoalSetting({ formData, handleChange, handleCheckboxChange, errors }) {
  return (
    <div>
      <h2 className="text-xl font-semibold mb-4">Activity & Energy</h2>
      <p className="mb-6 text-gray-700">
        Tell us a little about your activity level and energy.
      </p>

      <div className="mb-10">
        <FormCheckboxes
          legend="What are your goals?"
          options={[
            {
              id: 'weightLoss',
              name: 'goals',
              label: 'Weight Loss',
              checked: formData.goals.includes('weightLoss'),
            },
            {
              id: 'muscleGain',
              name: 'goals',
              label: 'Muscle Gain',
              checked: formData.goals.includes('musleGain'),
            },
            {
              id: 'improveHealth',
              name: 'goals',
              label: 'Improve Health',
              checked: formData.goals.includes('improveHealt'),
            },
            {
              id: 'boostEnergy',
              name: 'goals',
              label: 'Boost Energy',
              checked: formData.goals.includes('boostEnergy'),
            },
          ]}
          onChange={(id, isChecked) => handleCheckboxChange('goals', id)}
          required={true}
          error={errors.goals}
        />
      </div>

      <div className="mb-4">
        <FormSelect
          id="timeCommitment"
          name="timeCommitment"
          options={[
            { value: '15', label: '15 minutes' },
            { value: '30', label: '30 minutes' },
            { value: '60', label: '1 hour' },
          ]}
          onChange={handleChange}
          label="How much time can you commit each day?"
          required={true}
        />
      </div>
    </div>
  );
}

export default GoalSetting;