import React from "react";

interface LogoProps {
  size?: "sm" | "md" | "lg";
  iconOnly?: boolean;
}

const sizeMap = {
  sm: { text: "text-lg", icon: "w-8 h-8 text-sm" },
  md: { text: "text-xl", icon: "w-9 h-9 text-base" },
  lg: { text: "text-2xl", icon: "w-11 h-11 text-lg" },
};

export function Logo({ size = "md", iconOnly = false }: LogoProps) {
  const s = sizeMap[size];

  if (iconOnly) {
    return (
      <div
        className={`${s.icon} rounded-lg bg-indigo-600 flex items-center justify-center font-extrabold text-white`}
      >
        M
      </div>
    );
  }

  return (
    <span className={`${s.text} font-extrabold tracking-tight flex items-center gap-0`}>
      <span className="text-indigo-400">MCP</span>
      <span className="text-gray-100">Engine</span>
    </span>
  );
}