import { useState } from "react";
import WesiteCards from "./WesiteCards";
import Buttons from "./Buttons";
import MarketingCards from "./MarketingCards";
import CameraCards from "./CameraCards";
import SocialMediaCards from "./SocialMedia";

const CardGroup = () => {
  const [activeGroup, setActiveGroup] = useState("webCards");

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

  let ActiveCards;
  switch (activeGroup) {
    case "markCards":
      ActiveCards = MarketingCards;
      break;
    case "webCards":
      ActiveCards = WesiteCards;
      break;
    case "smCards":
      ActiveCards = SocialMediaCards;
      break;
    case "camCards":
      ActiveCards = CameraCards;
      break;
    default:
      ActiveCards = null;
  }

  return (
    <div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl flex flex-col">
      {ActiveCards && <ActiveCards />}
      <Buttons changeActiveGroup={changeActiveGroup} />
    </div>
  );
};

export default CardGroup;
