"use client";

import React from "react";
import Image from "next/image";

interface LogoProps {
  className?: string;
  size?: number;
}

export function Logo({ className = "", size = 32 }: LogoProps) {
  return (
    <div className={className} style={{ width: size, height: size }}>
      <Image
        src="/assets/images/logo.svg"
        alt="Assist Solutions Logo"
        width={size}
        height={size}
        className="w-full h-full object-contain"
        onError={e => {
          // Fallback to SVG if image fails to load
          const target = e.target as HTMLImageElement;
          target.style.display = "none";
          const parent = target.parentElement;
          if (parent) {
            parent.innerHTML = `
              <svg
                width="${size}"
                height="${size}"
                viewBox="0 0 32 32"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <!-- Top section - Light blue curved arrows -->
                <path
                  d="M8 8 C12 4, 20 4, 24 8 L20 12 C18 10, 14 10, 12 12 Z"
                  fill="#60A5FA"
                />
                <path
                  d="M24 8 C28 12, 28 20, 24 24 L20 20 C22 18, 22 14, 20 12 Z"
                  fill="#60A5FA"
                />
                
                <!-- Bottom section - Dark blue curved arrows -->
                <path
                  d="M8 24 C12 28, 20 28, 24 24 L20 20 C18 22, 14 22, 12 20 Z"
                  fill="#1E40AF"
                />
                <path
                  d="M8 24 C4 20, 4 12, 8 8 L12 12 C10 14, 10 18, 12 20 Z"
                  fill="#1E40AF"
                />
              </svg>
            `;
          }
        }}
      />
    </div>
  );
}
