"use client";

import Image from "next/image";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

type AvatarMotionProps = {
  src: string;
  alt: string;
  size?: number; // px
  className?: string;
};

export function AvatarMotion({
  src,
  alt,
  size = 160,
  className,
}: AvatarMotionProps) {
  // tailwind classes for typical 160px size
  const baseSizeClasses = size === 160 ? "h-40 w-40" : "";

  return (
    <motion.div
      whileHover={{ scale: 1.03, y: -2 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 360, damping: 22, mass: 0.6 }}
      className="inline-block group"
    >
      <Image
        src={src}
        alt={alt}
        width={size}
        height={size}
        className={cn(
          baseSizeClasses,
          "rounded-full object-cover ring-2 ring-neutral-200 shadow-lg transition-shadow duration-300 group-hover:shadow-xl dark:shadow-none dark:ring-neutral-800",
          className,
        )}
        priority
      />
    </motion.div>
  );
}