"use client";

interface DynamicLogoProps {
  src: string;
  color?: string;
  width?: string;
  height?: string;
  size?: string;
  className?: string;
}

export default function DynamicLogo({ 
  src, 
  color = "currentColor", 
  width = "100%", 
  height = "40px",
  size = "contain",
  className = ""
}: DynamicLogoProps) {
  return (
    <div
      className={className}
      style={{
        backgroundColor: color,
        maskImage: `url(${src})`,
        WebkitMaskImage: `url(${src})`,
        maskRepeat: "no-repeat",
        maskPosition: "center",
        maskSize: size,
        WebkitMaskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        WebkitMaskSize: size,
        width: width,
        height: height,
        transition: "background-color 0.3s ease",
      }}
    />
  );
}