Cards Stack

'use client';

import * as React from 'react';
import { HTMLMotionProps, motion } from 'motion/react';

import { cn } from '@/lib/utils';

interface CardStickyProps extends HTMLMotionProps<'div'> {
  index?: number;
  incrementY?: number;
  incrementZ?: number;
}

export const CardsStackContainer = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ children, className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn('relative w-full', className)}
      style={{ perspective: '1000px', ...props.style }}
      {...props}
    >
      {children}
    </div>
  );
});
CardsStackContainer.displayName = 'CardsStackContainer';

export const CardSticky = React.forwardRef<HTMLDivElement, CardStickyProps>(
  (
    {
      index = 1,
      incrementY = 10,
      incrementZ = 10,
      children,
      className,
      style,
      ...props
    },
    ref,
  ) => {
    const y = index * incrementY;
    const z = index * incrementZ;

    return (
      <motion.div
        ref={ref}
        layout="position"
        style={{
          top: y,
          z,
          backfaceVisibility: 'hidden',
          ...style,
        }}
        className={cn('sticky', className)}
        {...props}
      >
        {children}
      </motion.div>
    );
  },
);
CardSticky.displayName = 'CardSticky';