import React from "react";
import { cn } from "@/lib/utils";

/** 太极阴阳鱼图标（页眉 Logo）— 亮色模式描边保证阴阳分界可见 */
export const TaijiIcon = React.memo(function TaijiIcon({
  className,
}: {
  className?: string;
}) {
  return (
    <svg
      viewBox="0 0 64 64"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("h-7 w-7 shrink-0", className)}
      aria-hidden
    >
      <circle
        cx="32"
        cy="32"
        r="30"
        className="fill-white stroke-stone-600 stroke-[1.5] dark:fill-stone-200 dark:stroke-stone-400"
      />
      <path
        d="M32 2a30 30 0 0 1 0 60 15 15 0 0 1 0-30 15 15 0 0 0 0-30z"
        className="fill-stone-800 dark:fill-stone-900"
      />
      <circle cx="32" cy="17" r="5" className="fill-white dark:fill-stone-200" />
      <circle cx="32" cy="47" r="5" className="fill-stone-800 dark:fill-stone-900" />
    </svg>
  );
});

/** 背景用水印版太极 */
export function TaijiWatermark({
  className,
}: {
  className?: string;
}) {
  return (
    <svg
      viewBox="0 0 200 200"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden
    >
      <circle
        cx="100"
        cy="100"
        r="98"
        className="fill-none stroke-stone-400/30 stroke-[0.75] dark:stroke-stone-500/25"
      />
      <circle
        cx="100"
        cy="100"
        r="98"
        className="fill-white/40 dark:fill-stone-200/10"
      />
      <path
        d="M100 2a98 98 0 0 1 0 196 49 49 0 0 1 0-98 49 49 0 0 0 0-98z"
        className="fill-stone-600/10 dark:fill-stone-300/12"
      />
      <circle cx="100" cy="51" r="10" className="fill-white/60 dark:fill-stone-200/20" />
      <circle cx="100" cy="149" r="10" className="fill-stone-600/15 dark:fill-stone-300/20" />
    </svg>
  );
}