/**
 * The Claude (Anthropic) spark mark, simplified to a twelve-ray starburst in
 * the brand terracotta.
 */

import React from 'react';

import { CLAUDE_BRAND_COLOR } from '../../lib/engine-meta';

interface ClaudeLogoProps {
  size?: number;
  color?: string;
}

/**
 * Render the Claude starburst mark.
 *
 * @param {ClaudeLogoProps} props - Optional pixel size and override color.
 * @return {React.ReactElement} The SVG element.
 */
export function ClaudeLogo({
  size = 14,
  color = CLAUDE_BRAND_COLOR,
}: ClaudeLogoProps) {
  const rays = Array.from({ length: 12 }, (_, rayIndex) => {
    const angle = (rayIndex * Math.PI) / 6;
    const outer = rayIndex % 2 === 0 ? 10.4 : 8.2;
    const inner = 2.6;

    return {
      x1: 12 + Math.cos(angle) * inner,
      y1: 12 + Math.sin(angle) * inner,
      x2: 12 + Math.cos(angle) * outer,
      y2: 12 + Math.sin(angle) * outer,
    };
  });

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      focusable="false"
    >
      {rays.map((ray, rayIndex) => (
        <line
          key={rayIndex}
          x1={ray.x1}
          y1={ray.y1}
          x2={ray.x2}
          y2={ray.y2}
          stroke={color}
          strokeWidth={2.3}
          strokeLinecap="round"
        />
      ))}
    </svg>
  );
}