Motion cards

"use client"

import type * as React from "react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Motion card family: 5 cards carrying an entry or hover motion. The surface is the same calm token card in every variant; the difference is in the motion alone (lift, fade, pop, slide, reveal). Every variant is turned off with useReducedMotion(): instead of moving, the card simply sits in its final state. Colour comes ONLY from semantic tokens, transparency through color-mix. size = the padding plus radius scale (the same as card-styled). */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const radii: Record<StyledSize, string> = {
  sm: "rounded-lg",
  md: "rounded-xl",
  lg: "rounded-2xl",
  xl: "rounded-2xl",
}

const pads: Record<StyledSize, string> = {
  sm: "p-4",
  md: "p-5",
  lg: "p-6",
  xl: "p-8",
}

type Props = React.ComponentProps<"div"> & { size?: StyledSize }

const shell =
  "relative w-64 border border-border bg-card text-card-foreground shadow-[0_1px_2px_color-mix(in_oklab,var(--color-foreground)_10%,transparent)]"

const spring = { type: "spring" as const, stiffness: 320, damping: 24 }

const defaultBody = (
  <div className="flex flex-col gap-1">
    <span className="text-sm font-semibold text-foreground">Card title</span>
    <span className="text-xs leading-relaxed text-muted-foreground">
      A short description that shows how content sits inside the card.
    </span>
  </div>
)

/* Lift: the card rises on hover and its shadow grows. */
export function LiftCard({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <div data-slot="styled-card" className={cn("relative", className)} {...props}>
      <motion.div
        className={cn(
          shell,
          "transition-shadow duration-(--motion-base) ease-(--motion-ease) hover:shadow-[0_18px_36px_-16px_color-mix(in_oklab,var(--color-foreground)_45%,transparent)] motion-reduce:transition-none",
          radii[size],
          pads[size]
        )}
        whileHover={reduce ? undefined : { y: -6 }}
        transition={spring}
      >
        {children ?? defaultBody}
      </motion.div>
    </div>
  )
}

/* Fade: the card appears softly. Visible immediately under reduced-motion. */
export function FadeCard({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <div data-slot="styled-card" className={cn("relative", className)} {...props}>
      <motion.div
        className={cn(shell, radii[size], pads[size])}
        initial={reduce ? false : { opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.45, ease: "easeOut" }}
      >
        {children ?? defaultBody}
      </motion.div>
    </div>
  )
}

/* Pop: the card enters growing with a spring and grows slightly further on hover. */
export function PopCard({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <div data-slot="styled-card" className={cn("relative", className)} {...props}>
      <motion.div
        className={cn(shell, radii[size], pads[size])}
        initial={reduce ? false : { opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        whileHover={reduce ? undefined : { scale: 1.03 }}
        transition={spring}
      >
        {children ?? defaultBody}
      </motion.div>
    </div>
  )
}

/* Slide: kart soldan kayarak girer. */
export function SlideCard({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <div data-slot="styled-card" className={cn("relative", className)} {...props}>
      <motion.div
        className={cn(shell, radii[size], pads[size])}
        initial={reduce ? false : { opacity: 0, x: -28 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
      >
        {children ?? defaultBody}
      </motion.div>
    </div>
  )
}

/* Reveal: the content emerges through a clip-path as if opening from the top down. No clipping under reduced-motion, the content is fully visible. */
export function RevealCard({ className, size = "md", children, ...props }: Props) {
  const reduce = useReducedMotion()
  return (
    <div data-slot="styled-card" className={cn("relative", className)} {...props}>
      <motion.div
        className={cn(shell, "overflow-hidden", radii[size], pads[size])}
        initial={reduce ? false : { clipPath: "inset(0 0 100% 0)", opacity: 0 }}
        animate={{ clipPath: "inset(0 0 0% 0)", opacity: 1 }}
        transition={{ duration: 0.5, ease: "easeOut" }}
      >
        {children ?? defaultBody}
      </motion.div>
    </div>
  )
}