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

interface BrandMarkProps {
  size?: number;
  className?: string;
  /** Beats the heart glyph and makes the curve glow - used for the dashboard hero mark. */
  animated?: boolean;
}

/** Inline twin of app/icon.svg (the favicon) - kept as markup, not an <img>, so it can be sized/animated with CSS. */
export function BrandMark({ size = 28, className, animated = false }: BrandMarkProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("shrink-0", className)}
      aria-hidden="true"
    >
      <defs>
        <linearGradient id="bpGradMark" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#ff6fb0" />
          <stop offset="52%" stopColor="#b34bde" />
          <stop offset="100%" stopColor="#4f7fe0" />
        </linearGradient>
      </defs>
      <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGradMark)" />
      <g transform="translate(0 0.7)">
        <path
          d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
          fill="rgba(255,255,255,0.22)"
          className={cn(animated && "bp-mark-heart")}
        />
        <polyline
          points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
          fill="none"
          stroke="#ffffff"
          strokeWidth={1.7}
          strokeLinecap="round"
          strokeLinejoin="round"
          className={cn(animated && "bp-mark-curve")}
        />
      </g>
    </svg>
  );
}