import { logoSrc, useSystemSettings } from "../systemSettings";

export default function SystemBrand({ size = "md" }: { size?: "sm" | "md" | "lg" }) {
  const { settings, logoCacheKey } = useSystemSettings();
  const logo = logoSrc(settings.logo_url, logoCacheKey);
  const imgH = size === "lg" ? 48 : size === "sm" ? 28 : 32;
  const fontSize = size === "lg" ? 22 : size === "sm" ? 15 : 16;

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
      {logo && (
        <img
          src={logo}
          alt=""
          style={{ height: imgH, maxWidth: 160, objectFit: "contain", flexShrink: 0 }}
        />
      )}
      <span
        style={{
          color: "#1677ff",
          fontWeight: 600,
          fontSize,
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
      >
        {settings.system_name}
      </span>
    </div>
  );
}