"use client";

import openinaryLoader from '../lib/openinary-loader';

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) {
  
  const imageUrl = src.startsWith('/') ? openinaryLoader({ src, width: 800 }) : src;

  return (
    <div
      className={className}
      style={{
        backgroundColor: color,
        maskImage: `url(${imageUrl})`,
        WebkitMaskImage: `url(${imageUrl})`,
        maskRepeat: "no-repeat",
        maskPosition: "center",
        maskSize: size,
        WebkitMaskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        WebkitMaskSize: size,
        width: width,
        height: height,
        transition: "background-color 0.3s ease",
      }}
    />
  );
}