Skeleton

"use client";

import React from "react";
import { motion, HTMLMotionProps } from "motion/react";
import { cn } from "@/lib/utils";

interface SkeletonProps extends HTMLMotionProps<"div"> {
  animation?: "pulse" | "shimmer" | "none";
  shimmerColor?: string;
}

export const Skeleton = ({
  className,
  animation = "pulse",
  shimmerColor = "rgba(255, 255, 255, 0.05)",
  ...props
}: SkeletonProps) => {
  if (animation === "pulse") {
    return (
      <motion.div
        initial={{ opacity: 0.5 }}
        animate={{ opacity: [0.5, 0.3, 0.5] }}
        transition={{
          duration: 1.5,
          repeat: Infinity,
          ease: "easeInOut",
        }}
        className={cn("rounded-md bg-foreground/10", className)}
        {...props}
      />
    );
  }

  if (animation === "shimmer") {
    return (
      <motion.div
        className={cn(
          "relative overflow-hidden rounded-md bg-foreground/10",
          className
        )}
        {...props}
      >
        <motion.div
          initial={{ x: "-100%" }}
          animate={{ x: "100%" }}
          transition={{
            duration: 1.5,
            repeat: Infinity,
            ease: "linear",
          }}
          className="absolute inset-0 z-0"
          style={{
            background: `linear-gradient(90deg, transparent 0%, ${shimmerColor} 50%, transparent 100%)`,
          }}
        />
      </motion.div>
    );
  }

  return (
    <motion.div
      className={cn("rounded-md bg-foreground/10", className)}
      {...props}
    />
  );
};