import type { SVGProps } from "react";

interface LogoMarkProps extends Omit<SVGProps<SVGSVGElement>, "viewBox"> {
  title?: string;
}

export function LogoMark({ title = "Event Manager", className, ...rest }: LogoMarkProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 405 347"
      width={32}
      height={32}
      role="img"
      aria-label={title}
      className={className}
      {...rest}
    >
      <defs>
        <linearGradient id="em-logo-blue" x1="99" y1="278" x2="224" y2="44" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#0751C9" />
          <stop offset="0.55" stopColor="#0569E4" />
          <stop offset="1" stopColor="#167DFF" />
        </linearGradient>
        <linearGradient id="em-logo-red" x1="166" y1="202" x2="316" y2="123" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#F53214" />
          <stop offset="1" stopColor="#FF2B09" />
        </linearGradient>
        <linearGradient id="em-logo-orange" x1="172" y1="333" x2="315" y2="190" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#FF9300" />
          <stop offset="0.55" stopColor="#FFA500" />
          <stop offset="1" stopColor="#FFB70A" />
        </linearGradient>
      </defs>
      <path fill="url(#em-logo-blue)" d="M217 49 84 130v106l83 47 76-52-47-27-29 21 15 10-14 10-48-26-2-71 67-41 65-58 2-0Z" />
      <path fill="url(#em-logo-red)" d="M314 124h-84l-64 43v35l74-47h51l23-31Z" />
      <path fill="url(#em-logo-orange)" d="m312 204-66-37-42 31h28l47 27-89 59-17 48 139-87v-41Z" />
    </svg>
  );
}

export default LogoMark;