import React, { useState } from 'react'

const Sections = () => {

  const [activeSection, setActiveSection] = useState("descrição1");
  const handleClick = (section:string) => {
    setActiveSection(section);
}
  console.log(activeSection)
  return (
    <div>
      <ul>
        <li>
          <button onClick={() => handleClick("descrição1")}
          className={activeSection === "descrição1" ? "open" : "close"}
          >
            Descrição
          </button>
        </li>
        <li>
        <button onClick={() => handleClick("descrição2")}
          className={activeSection === "descrição2" ? "open" : "close"}
          >
            Descrição
          </button>
        </li>
        <li>
        <button onClick={() => handleClick("descrição3")}
          className={activeSection === "descrição3" ? "open" : "close"}
          >
            Descrição
          </button>
        </li>
        <li>
        <button onClick={() => handleClick("descrição4")}
          className={activeSection === "descrição4" ? "open" : "close"}
          >
            Descrição
          </button>
        </li>
        <li>
        <button onClick={() => handleClick("descrição5")}
          className={activeSection === "descrição5" ? "open" : "close"}
          >
            Descrição
          </button>
        </li>
      </ul>
    </div>
  )
}

export default Sections