import React from "react";
import { cn } from "@/lib/utils";

export function FluxentLogo({
  className,
  size = 36,
}: {
  className?: string;
  size?: number;
}) {
  return (
    <div
      className={cn(
        "relative flex items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm transition-transform duration-300 group-hover:scale-105",
        className
      )}
      style={{ width: size, height: size }}
    >
      <svg
        width={Math.round(size * 0.64)}
        height={Math.round(size * 0.64)}
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="text-primary-foreground"
      >
        {/* Modern streamlined geometric flow icon for Fluxent multi-currency assets */}
        <path
          d="M4 6.5C4 5.11929 5.11929 4 6.5 4H14.5C15.8807 4 17 5.11929 17 6.5C17 7.88071 15.8807 9 14.5 9H9.5C8.11929 9 7 10.1193 7 11.5V11.5C7 12.8807 8.11929 14 9.5 14H19.5"
          stroke="currentColor"
          strokeWidth="2.2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M7 11.5H16.5C17.8807 11.5 19 12.6193 19 14V14C19 15.3807 17.8807 16.5 16.5 16.5H6.5C5.11929 16.5 4 17.6193 4 19V19C4 19.5523 4.44772 20 5 20H15"
          stroke="currentColor"
          strokeWidth="2.2"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeOpacity="0.75"
        />
        <circle cx="19.5" cy="14" r="1.5" fill="currentColor" />
        <circle cx="15" cy="20" r="1.5" fill="currentColor" fillOpacity="0.8" />
      </svg>
    </div>
  );
}