import React, { useState } from "react";
import { Button, Box } from "@mui/material";
import JobRequestForm from "./JobRequestForm";
import { AddCircleOutlineOutlined } from "@mui/icons-material";

export default function JobRequestSection() {
  const [jobs, setJobs] = useState([{ id: Date.now(), jobCategoryId: "", hasPlan: false, planStartDate: null, degree: "" }]);

  const addJob = () => {
    setJobs([...jobs, { id: Date.now(), jobCategoryId: "", hasPlan: false, planStartDate: null, degree: "" }]);
  };

  const updateJob = (id, updatedData) => {
    setJobs(jobs.map(j => j.id === id ? { ...updatedData, id } : j));
  };

  const removeJob = (id) => {
    if (jobs.length > 1) setJobs(jobs.filter(j => j.id !== id));
  };

  return (
    <div className="space-y-10 ">
      {jobs.map((job) => (
        <JobRequestForm
          key={job.id}
          data={job}
          onChange={(newData) => updateJob(job.id, newData)}
          onRemove={() => removeJob(job.id)}
          isDeletable={jobs.length > 1}
        />
      ))}
      
      <Button 
        variant="outlined" 
        startIcon={<AddCircleOutlineOutlined />} 
        onClick={addJob}
        sx={{ mt: 1, borderColor: '#4caf50', color: '#4caf50' }}
      >
        افزودن شغل درخواستی جدید
      </Button>
    </div>
  );
}