Skeleton-Karte

import { motion } from "framer-motion";

interface SkeletonCardProps {
  color?: string;
  /** Tamaño del avatar en px. */
  size?: number;
  /** Duración de un pulso en segundos. */
  speed?: number;
}

export default function SkeletonCard({
  color = "#86868b",
  size = 40,
  speed = 1.8,
}: SkeletonCardProps) {
  return (
    <motion.div
      aria-busy="true"
      className="w-56 rounded-3xl bg-white p-4 shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] dark:bg-[#1c1c1e]"
      animate={{ opacity: [1, 0.4, 1] }}
      transition={{ duration: speed, repeat: Infinity, ease: "easeInOut" }}
    >
      <div className="flex items-center gap-3">
        <div
          className="rounded-full"
          style={{ width: size, height: size, backgroundColor: color }}
        />
        <div className="flex-1 space-y-2">
          <div className="h-2.5 rounded-full" style={{ backgroundColor: color, width: "70%" }} />
          <div className="h-2.5 rounded-full" style={{ backgroundColor: color, width: "40%" }} />
        </div>
      </div>
      <div className="mt-4 space-y-2">
        <div className="h-2.5 rounded-full" style={{ backgroundColor: color }} />
        <div className="h-2.5 rounded-full" style={{ backgroundColor: color, width: "85%" }} />
        <div className="h-2.5 rounded-full" style={{ backgroundColor: color, width: "60%" }} />
      </div>
    </motion.div>
  );
}