interface LogoProps {
  className?: string;
  width?: number;
  height?: number;
}

const Logo = ({ className, width = 30, height = 30 }: LogoProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={width}
    height={height}
    viewBox="0 0 512 512"
    className={className}
    aria-hidden
  >
    {/* rounded square background */}
    <rect x="48" y="48" width="416" height="416" rx="92" fill="#FFFFFF" />
    {/* tilted oval */}
    <ellipse cx="256" cy="256" rx="210" ry="150" fill="#111111" transform="rotate(-28 256 256)" />
    {/* small dot */}
    <circle cx="356" cy="172" r="18" fill="#FFFFFF" />
    {/* enlarged sparkle star */}
    <g transform="translate(256 256) rotate(-28)">
      <path
        d="
          M 0,-170
          C 22,-105 60,-72 120,-56
          C 60,-40 22,-8 0,64
          C -22,-8 -60,-40 -120,-56
          C -60,-72 -22,-105 0,-170
          Z
        "
        fill="#FFFFFF"
      />
    </g>
  </svg>
);

export default Logo;