Service Cards

"use client";

import {
  Children,
  type CSSProperties,
  createContext,
  type ReactNode,
  useContext,
} from "react";
import { cn } from "@/lib/utils";

const SCALE_MIN = 0.82;

interface ServiceCardContextValue {
  count: number;
  index: number;
  spreadPx: number;
  verticalStaggerPercentage: number;
}

const ServiceCardContext = createContext<ServiceCardContextValue | null>(null);
const ServiceCardItemContext = createContext(false);

function useServiceCard() {
  const ctx = useContext(ServiceCardContext);
  if (!ctx) {
    throw new Error(
      "ServiceCardContent and ServiceCardItem must be used within ServiceCardBox"
    );
  }
  return ctx;
}

function cardProgress(index: number, count: number) {
  if (count <= 1) {
    return 0;
  }
  return index / (count - 1);
}

function cardTransforms(
  index: number,
  count: number,
  verticalStaggerPercentage: number,
  spreadPx: number
) {
  const fromBack = count - 1 - index;
  const t = cardProgress(fromBack, count);
  const y = verticalStaggerPercentage * (fromBack - (count - 1) / 2);
  const scale = SCALE_MIN + (1 - SCALE_MIN) * t;
  const z = -spreadPx + 2 * spreadPx * t;

  return {
    hover: `translate3d(-50%, -50%, ${z}px) scale(1)`,
    rest: `translate3d(-50%, calc(-50% + ${y}%), 0) scale(${scale})`,
  };
}

const ServiceCards = ({
  children,
  className,
  verticalStaggerPercentage = 16,
  spreadPx = 140,
  ...props
}: {
  children: ReactNode;
  className?: string;
  /**
   * The percentage of the vertical distance between each card when closed.
   * @default 16
   */
  verticalStaggerPercentage?: number;
  /**
   * The distance between the cards when opened.
   * @default 140
   */
  spreadPx?: number;
} & React.ComponentProps<"div">) => {
  const items = Children.toArray(children);

  return (
    <div
      aria-label="Service Card Box"
      className={cn(
        "group perspective-[720px] relative h-125 w-125 duration-300 motion-reduce:duration-0",
        className
      )}
      role="list"
      {...props}
    >
      <div className="transform-3d pointer-events-none absolute inset-0 origin-center transition-transform duration-[inherit] group-hover:-rotate-y-45">
        {items.map((child, index) => (
          <ServiceCardContext.Provider
            /* biome-ignore lint/suspicious/noArrayIndexKey: we've just the index */
            key={index}
            value={{
              count: items.length,
              index,
              spreadPx,
              verticalStaggerPercentage,
            }}
          >
            {child}
          </ServiceCardContext.Provider>
        ))}
      </div>
    </div>
  );
};

const ServiceCardShell = ({ children }: { children: ReactNode }) => {
  const { index, count, verticalStaggerPercentage, spreadPx } =
    useServiceCard();
  const { rest, hover } = cardTransforms(
    index,
    count,
    verticalStaggerPercentage,
    spreadPx
  );

  return (
    <div
      aria-label="Service Card Item"
      className="transform-3d transform-(--card-rest) group-hover:transform-(--card-hover) pointer-events-auto absolute top-1/2 left-1/2 h-57.5 w-75 origin-center transition-transform duration-[inherit]"
      role="listitem"
      style={
        {
          "--card-hover": hover,
          "--card-rest": rest,
          zIndex: count - 1 - index,
        } as CSSProperties
      }
    >
      <div className="group/content relative size-full duration-[inherit]">
        <div className="relative size-full duration-[inherit] group-hover/content:translate-y-[-15%]">
          {children}
        </div>
      </div>
    </div>
  );
};

const ServiceCardItem = ({ children }: { children: ReactNode }) => (
  <ServiceCardItemContext.Provider value={true}>
    <ServiceCardShell>{children}</ServiceCardShell>
  </ServiceCardItemContext.Provider>
);

const ServiceCardContent = ({
  children,
  className,
  ...props
}: {
  children: ReactNode;
  className?: string;
} & React.ComponentProps<"div">) => {
  const insideItem = useContext(ServiceCardItemContext);
  const card = (
    <div
      className={cn(
        "relative z-20 size-full overflow-hidden rounded-2xl bg-white shadow-xl transition-transform",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );

  if (insideItem) {
    return card;
  }

  return <ServiceCardShell>{card}</ServiceCardShell>;
};

const ServiceCardTooltip = ({
  children,
  className,
  ...props
}: {
  children: ReactNode;
  className?: string;
} & React.ComponentProps<"div">) => (
  <div
    aria-label="Side Card Tooltip"
    className={cn(
      "absolute top-0 left-1/2 z-10 -translate-x-1/2 rounded-full bg-[#101010] px-2.5 py-1.5 font-medium text-white text-xs opacity-0 duration-[inherit] group-hover/content:-top-10 group-hover/content:opacity-100",
      className
    )}
    role="tooltip"
    {...props}
  >
    {children}
  </div>
);

export { ServiceCards, ServiceCardContent, ServiceCardItem, ServiceCardTooltip };

<ServiceCards spreadPx={spreadPx} verticalStaggerPercentage={verticalStaggerPercentage}>
  <ServiceCardItem>
    <ServiceCardContent>
      <Image
        alt="Card 1"
        className="object-cover object-center"
        fill
        sizes="300px"
        src="https://picsum.photos/id/2/300/300"
      />
    </ServiceCardContent>
    <ServiceCardTooltip className="flex items-center gap-2">
      <span className="text-[#d1d1d1]">01</span>
      <span>Portfolios</span>
    </ServiceCardTooltip>
  </ServiceCardItem>
</ServiceCards>