"use client";

import { AnimatePresence, MotionConfig } from "motion/react";
import { useState } from "react";
import CollapsedState from "./collapsed-state";
import { IMAGES } from "./constant";
import ExpandedState from "./expanded-state";

const CollectionPreview = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = (value: boolean) => {
    setIsExpanded(value);
  };

  return (
    <MotionConfig transition={{ type: "spring", duration: 0.45, bounce: 0 }}>
      <AnimatePresence mode="popLayout" initial={false}>
        {!isExpanded ? (
          <div key="collapsed">
            <CollapsedState
              images={IMAGES}
              setIsExpanded={() => handleToggle(true)}
            />
          </div>
        ) : (
          <div key="expanded">
            <ExpandedState
              images={IMAGES}
              setIsExpanded={() => handleToggle(false)}
            />
          </div>
        )}
      </AnimatePresence>
    </MotionConfig>
  );
};

export default CollectionPreview;

"use client";

import { AnimatePresence, MotionConfig } from "motion/react";
import { useState } from "react";
import CollapsedState from "./collapsed-state";
import { IMAGES } from "./constant";
import ExpandedState from "./expanded-state";

const CollectionPreview = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = (value: boolean) => {
    setIsExpanded(value);
  };

  return (
    <MotionConfig transition={{ type: "spring", duration: 0.45, bounce: 0 }}>
      <AnimatePresence mode="popLayout" initial={false}>
        {!isExpanded ? (
          <div key="collapsed">
            <CollapsedState
              images={IMAGES}
              setIsExpanded={() => handleToggle(true)}
            />
          </div>
        ) : (
          <div key="expanded">
            <ExpandedState
              images={IMAGES}
              setIsExpanded={() => handleToggle(false)}
            />
          </div>
        )}
      </AnimatePresence>
    </MotionConfig>
  );
};

export default CollectionPreview;