Avatar with status ring

import { motion } from "framer-motion";

interface StatusAvatarProps {
  color?: string;
  speed?: number;
}

export default function StatusAvatar({
  color = "#34c759",
  speed = 2.4,
}: StatusAvatarProps) {
  return (
    <div className="relative text-[#1d1d1f] dark:text-[#f5f5f7]">
      <motion.div
        className="absolute -inset-1 rounded-full border-2"
        style={{ borderColor: color }}
        animate={{ scale: [1, 1.12, 1], opacity: [1, 0.35, 1] }}
        transition={{ duration: speed, repeat: Infinity }}
      />
      <div className="grid h-16 w-16 place-items-center rounded-full bg-white dark:bg-[#1c1c1e] text-lg font-semibold shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]">
        AL
      </div>
      <span
        className="absolute bottom-0 right-0 h-4 w-4 rounded-full border-2 border-white dark:border-[#1c1c1e]"
        style={{ backgroundColor: color }}
      />
    </div>
  );
}