import Link from "next/link";
import DropDown from "./DropDown";

export default function Nav({ setMobileToggle }) {
  return (
    <ul className="cs_nav_list fw-medium">
      {/* <li className="menu-item-has-children">
        <Link href="/">Home</Link>
        <DropDown>
          <ul>
            <li>
              <Link href="/" onClick={() => setMobileToggle(false)}>
                Home V1
              </Link>
            </li>
            <li>
              <Link href="/home2" onClick={() => setMobileToggle(false)}>
                Home V2
              </Link>
            </li>
          </ul>
        </DropDown>
      </li> */}
      <li>
        <Link href="/" onClick={() => setMobileToggle(false)}>
          Home
        </Link>
      </li>
      {/* <li>
        <Link href="/about" onClick={() => setMobileToggle(false)}>
          HVAC Services
        </Link>
      </li> */}
      <li className="menu-item-has-children">
        <Link href="/service" onClick={() => setMobileToggle(false)}>
          HVAC Services
        </Link>
        <DropDown>
          <ul>
            <li>
              <Link href="/service/hvac" onClick={() => setMobileToggle(false)}>
                Air Conditioning
              </Link>
            </li>
            <li>
              <Link
                href="/service/heating"
                onClick={() => setMobileToggle(false)}
              >
                Heating
              </Link>
            </li>
            <li>
              <Link
                href="/service/maintenance"
                onClick={() => setMobileToggle(false)}
              >
                Maintenance
              </Link>
            </li>
            <li>
              <Link
                href="/service/ductlessAc"
                onClick={() => setMobileToggle(false)}
              >
                Ductless AC
              </Link>
            </li>
            <li>
              <Link
                href="/service/indorAirQuality"
                onClick={() => setMobileToggle(false)}
              >
                Indor Air Quality
              </Link>
            </li>
            <li>
              <Link
                href="/service/commercialHvac"
                onClick={() => setMobileToggle(false)}
              >
                Commercial HVAC
              </Link>
            </li>
          </ul>
        </DropDown>
      </li>
      <li>
        <Link href="/contact" onClick={() => setMobileToggle(false)}>
          Plumbing Services
        </Link>
      </li>
      <li>
        <Link href="/contact" onClick={() => setMobileToggle(false)}>
          About Us
        </Link>
      </li>
      {/* <li className="menu-item-has-children">
        <Link href="#">About Us</Link>
        <DropDown>
          <ul>
            <li>
              <Link href="/team" onClick={() => setMobileToggle(false)}>
                Team
              </Link>
            </li>
            <li>
              <Link
                href="/team/team-details"
                onClick={() => setMobileToggle(false)}
              >
                Team Details
              </Link>
            </li>
            <li>
              <Link href="/project" onClick={() => setMobileToggle(false)}>
                Project
              </Link>
            </li>
            <li>
              <Link
                href="/project/project-details"
                onClick={() => setMobileToggle(false)}
              >
                Project Details
              </Link>
            </li>
          </ul>
        </DropDown>
      </li> */}
      {/* <li className="menu-item-has-children">
        <Link href="/blog" onClick={() => setMobileToggle(false)}>
          Specials
        </Link>
        <DropDown>
          <ul>
            <li>
              <Link href="/blog" onClick={() => setMobileToggle(false)}>
                Blog
              </Link>
            </li>
            <li>
              <Link
                href="/blog/blog-details"
                onClick={() => setMobileToggle(false)}
              >
                Blog Details
              </Link>
            </li>
          </ul>
        </DropDown>
      </li> */}
      <li>
        <Link href="/contact" onClick={() => setMobileToggle(false)}>
          Specials
        </Link>
      </li>
      <li>
        <Link href="/contact" onClick={() => setMobileToggle(false)}>
          Service Area
        </Link>
      </li>
      <li>
        <Link href="/contact" onClick={() => setMobileToggle(false)}>
          Contact Us
        </Link>
      </li>
    </ul>
  );
}
