import { FormWrapper } from "./FormWrapper";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

type LogoIndustry = {
  industry: string;
};

type LogoIndustryFormProps = LogoIndustry & {
  updateFields: (fields: Partial<LogoIndustry>) => void;
};

const industries = [
  { name: "Travel", img: "fas fa-plane-departure" },
  { name: "Sports Fitness", img: "fas fa-dumbbell" },
  { name: "Retail", img: "far fa-shopping-cart" },
  { name: "Religious", img: "far fa-cross" },
  { name: "Real Estate", img: "fas fa-home" },
  { name: "Legal", img: "fas fa-gavel" },
  { name: "Internet", img: "far fa-globe" },
  { name: "Technology", img: "fas fa-robot" },
  { name: "Home Family", img: "fas fa-couch" },
  { name: "Events", img: "fas fa-glass-cheers" },
  { name: "Medical Dental", img: "far fa-medkit" },
  { name: "Restaurant", img: "fas fa-hat-chef" },
  { name: "Finance", img: "far fa-usd-circle" },
  { name: "Nonprofit", img: "fas fa-hands-heart" },
  { name: "Entertainment", img: "fas fa-popcorn" },
  { name: "Construction", img: "far fa-user-hard-hat" },
  { name: "Education", img: "fas fa-graduation-cap" },
  { name: "Beauty Spa", img: "fas fa-spa" },
  { name: "Automotive", img: "fas fa-car" },
  { name: "Animals Pets", img: "fas fa-paw" },
  { name: "Others", img: "fas fa-plus-circle" },
];

export function LogoIndustryForm({
  industry,
  updateFields,
}: LogoIndustryFormProps) {
  const handleIndustryChange = (event) => {
    console.log(event.target.value);
    updateFields({ industry: event.target.value });
  };

  return (
    <FormWrapper title="Please Select A Industry">
      <div className="industryItemSelect">
        <label htmlFor="">Select Industry</label>
        <select name="" id="" onChange={(e) => updateFields({industry: e.target.value})}>
          {industries.map((industryOption, index) => (
            <option
              value={industryOption.name}
              key={`${industryOption}${index}`}
            >
              {industryOption.name}
            </option>
          ))}
        </select>
      </div>
      {/* <ul className="industryItems">
        {industries.map((industryOption, index) => (
          <li key={`${industryOption}${index}`} className="">
            <label className="grid place-items-center">
              <input type="radio" name="industry" value={industryOption.name} checked={industry === industryOption.name} onChange={() => handleIndustryChange(industryOption.name)} />
              <i className={industryOption.img ? industryOption.img : 'fas fa-plane-departure'} />
              <span>{industryOption.name}</span>
            </label>
          </li>
        ))}
      </ul> */}
    </FormWrapper>
  );
}