"use client";
import { useState } from "react";
export default function MMenuCards({ MSdata }) {
  const [Menu, setMenu] = useState(MSdata?.[0]?.id);
  return (
    <>
      <div id="menuCards">
        <div className="flex flex-wrap justify-center gap-2 md:flex-nowrap md:space-x-4 text-center mt-10">
          {MSdata?.map((item, i) => (
            <a href={`#section-a${i}`} key={i} className="flex justify-center">
              <button
                className={`${Menu === item?.id ? "btn-red" : "act-btn"}`}
                onClick={() => setMenu(item?.id)}
              >
                {item.name}
              </button>
            </a>
          ))}
        </div>
      </div>
    </>
  );
}
