import type { SVGProps } from "react";

export interface MotifSparkleProps extends SVGProps<SVGSVGElement> {
  /**
   * Icon size (width and height)
   * @default 16
   */
  size?: number | string;
}

/**
 * Brand motif — four-pointed sparkle shape
 * Part of the BrightLocal brand motif set (circle, sparkle, sunrise, starburst)
 *
 * Used for AI/magic/highlight decorations across the product.
 * Also used in the Loading animation as the STAR_PATH morph shape.
 *
 * @example
 * <MotifSparkle size={24} />
 * <MotifSparkle size={32} className="text-primary" />
 */
export const MotifSparkle = ({ size = 16, ...props }: MotifSparkleProps) => (
  <svg
    aria-hidden="true"
    fill="currentColor"
    height={size}
    viewBox="0 0 500 500"
    width={size}
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path d="M492.425 259.355C332.265 293.145 293.145 332.265 259.355 492.425C257.225 502.525 242.775 502.525 240.645 492.425C206.855 332.265 167.735 293.145 7.575 259.355C-2.525 257.225 -2.525 242.775 7.575 240.645C167.735 206.855 206.855 167.735 240.645 7.575C242.775 -2.525 257.225 -2.525 259.355 7.575C293.145 167.735 332.265 206.855 492.425 240.645C502.525 242.775 502.525 257.225 492.425 259.355Z" />
  </svg>
);