Logo que se dibuja

import { motion } from "framer-motion";

const LOGO_PATH = "M18 77 42 20l14 34 12-25 16 48M30 59h48";

interface StrokeLogoLoaderProps {
  color?: string;
  size?: number;
  /** Segundos que tarda en dibujarse el trazo. */
  speed?: number;
}

export default function StrokeLogoLoader({
  color = "#0071e3",
  size = 100,
  speed = 1.8,
}: StrokeLogoLoaderProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      role="img"
      aria-label="Símbolo abstracto animado"
    >
      {/* Trazo guía: mantiene el símbolo visible mientras se dibuja */}
      <path
        d={LOGO_PATH}
        fill="none"
        className="stroke-black/15 dark:stroke-white/20"
        strokeWidth="6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <motion.path
        d={LOGO_PATH}
        fill="none"
        stroke={color}
        strokeWidth="6"
        strokeLinecap="round"
        strokeLinejoin="round"
        initial={{ pathLength: 0, opacity: 0.2 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{
          duration: speed,
          repeat: Infinity,
          repeatType: "reverse",
          ease: "easeInOut",
        }}
      />
    </svg>
  );
}