import { useState } from "react";
import CardBtn from "./CardBtn";

interface props {
  changeActiveGroup: (group: string) => void;
}

const Buttons = ({ changeActiveGroup }: props) => {
  const [selectedButton, setSelectedButton] = useState<string | null>(
    "webCards"
  );

  const handleClick = (group: string) => {
    changeActiveGroup(group);
    setSelectedButton(group);
  };

  return (
    <div className="lg:px-40 flex flex-row gap-2 mx-2 md:gap-5 mt-10 mb-4 flex-wrap justify-center">
      <CardBtn
        title="Marketing"
        onClick={() => handleClick("markCards")}
        isSelected={selectedButton === "markCards"}
      />
      <CardBtn
        title="Website"
        onClick={() => handleClick("webCards")}
        isSelected={selectedButton === "webCards"}
      />
      <CardBtn
        title="Social Media"
        onClick={() => handleClick("smCards")}
        isSelected={selectedButton === "smCards"}
      />
      <CardBtn
        title="Camera & Edits"
        onClick={() => handleClick("camCards")}
        isSelected={selectedButton === "camCards"}
      />
    </div>
  );
};

export default Buttons;
