"use client";

import { useId } from "react";
import type { CSSProperties } from "react";

type Props = {
  size?: number;
  className?: string;
  title?: string;
  style?: CSSProperties;
};

/**
 * Avaria-Markenzeichen — vierzackiger Stern (Sparkle) im Marken-Verlauf
 * Blau → Violett → Pink mit eingelassener Dreiecks-Kontur ("A") als
 * Negativfläche. Vektorbasiert + eindeutige IDs (useId), damit mehrere
 * Instanzen auf einer Seite korrekt rendern.
 */
export function AvariaLogo({ size = 40, className, title = "Avaria", style }: Props) {
  const raw = useId();
  const uid = raw.replace(/[^a-zA-Z0-9]/g, "");
  const gid = `ava-grad-${uid}`;
  const mid = `ava-cut-${uid}`;

  return (
    <svg
      width={size}
      height={(size * 132) / 120}
      viewBox="0 0 120 132"
      role="img"
      aria-label={title}
      className={className}
      style={style}
    >
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#9ed7ff" />
          <stop offset="0.5" stopColor="#c8bcff" />
          <stop offset="1" stopColor="#ff9fd7" />
        </linearGradient>
        <mask id={mid}>
          <rect x="0" y="0" width="120" height="132" fill="white" />
          {/* Dreiecks-Kontur ("A") als Negativfläche */}
          <path d="M60 44 L82 96 L38 96 Z" fill="black" />
          <path d="M60 60 L73 90 L47 90 Z" fill="white" />
        </mask>
      </defs>
      {/* Vierzackiger Stern mit konkaven, vertikal gestreckten Kanten */}
      <path
        d="M60 6 Q68 56 114 64 Q68 72 60 126 Q52 72 6 64 Q52 56 60 6 Z"
        fill={`url(#${gid})`}
        mask={`url(#${mid})`}
      />
    </svg>
  );
}