"use client";

import React, { useState } from "react";
import { Select, SelectSection, SelectItem } from "@nextui-org/select";
const ServiceInfoContainer: React.FC = () => {
  const [service, setService] = useState<string>("");

  const categories: string[] = [
    "Beginner (0-1 year)",
    "Intermediate (2-3 years)",
    "Experienced (4-5 years)",
    "Expert (6+ years)",
  ];

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

  return (
    <>
      Service: {service}
      <Select onChange={handleChange} label="Select years of experience">
        {categories.map((categ) => (
          <SelectItem key={categ} value={categ}>
            {categ}
          </SelectItem>
        ))}
      </Select>
    </>
  );
};

export default ServiceInfoContainer;