import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
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 prefersReducedMotion = useReducedMotion();

  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="flex flex-col gap-8 lg:gap-10">
      <Buttons changeActiveGroup={changeActiveGroup} />
      <div className="relative">
        <AnimatePresence mode="wait">
          {ActiveCards && (
            <motion.div
              key={activeGroup}
              initial={
                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }
              }
              animate={
                prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
              }
              exit={
                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -12 }
              }
              transition={{ type: "spring", damping: 26, stiffness: 220 }}
            >
              <ActiveCards />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default CardGroup;