import React from "react";

interface ExperienceLevelProps {
  onExperienceLevelChange: (experienceLevel: string) => void;
}

const ExperienceLevel: React.FC<ExperienceLevelProps> = ({
  onExperienceLevelChange,
}) => {
  const experienceLevels = [
    { id: 1, name: "Fresher" },
    { id: 2, name: "1 Year" },
    { id: 3, name: "2 Years" },
    { id: 4, name: "3+ Years" },
  ];

  const handleExperienceLevelChange = (
    e: React.ChangeEvent<HTMLSelectElement>
  ) => {
    onExperienceLevelChange(e.target.value);
  };

  return (
    <>
      <select className="form-select" onChange={handleExperienceLevelChange}>
        <option value="">Choose an Experience Level</option>
        {experienceLevels.map((item) => (
          <option
            key={item.id}
            value={item.name.toLowerCase().replace(" ", "-")}
          >
            {item.name}
          </option>
        ))}
      </select>
      <span className="icon flaticon-briefcase"></span>
    </>
  );
};

export default ExperienceLevel;