"use client";

type Props = {
  onTap?: () => void;
};

export function LoadingLogo({ onTap }: Props) {
  return (
    <button
      type="button"
      aria-label="Reload page"
      onClick={(e) => {
        e.stopPropagation();
        onTap?.();
      }}
      className="absolute inset-0 m-auto w-16 h-16 flex items-center justify-center cursor-pointer active:scale-95 transition-transform"
    >
      <svg
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
        className="w-full h-full animate-[spin_2s_linear_infinite] text-accent/40"
        fill="none"
        stroke="currentColor"
        strokeWidth={3}
      >
        <g transform="translate(50,50)">
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" />
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" transform="rotate(45)" />
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" transform="rotate(90)" />
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" transform="rotate(135)" />
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" transform="rotate(180)" />
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" transform="rotate(225)" />
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" transform="rotate(270)" />
          <ellipse cx="0" cy="-22" rx="6.5" ry="13" transform="rotate(315)" />
          <circle cx="0" cy="0" r="8" />
        </g>
      </svg>
    </button>
  );
}