export function PeachMark(props: { class?: string }) {
  return (
    <svg
      class={props.class}
      width="14"
      height="14"
      viewBox="0 0 240 240"
      fill="none"
      aria-hidden="true"
    >
      <path d="M 124 64 C 134 32 168 16 200 22 C 198 56 168 72 130 66 Z" fill="#92AC65" />
      <path d="M 130 64 C 152 46 178 30 196 24" stroke="#5E7A42" stroke-width="2.6" fill="none" stroke-linecap="round" />
      <path d="M 120 60 C 75 45 28 75 22 130 C 18 185 65 222 125 222 C 185 222 222 185 220 130 C 218 78 170 45 120 60 Z" fill="#FFB082" />
      <path d="M 120 60 C 75 45 28 75 22 130 C 18 185 65 222 125 222 C 105 195 75 150 100 90 C 105 75 112 65 120 60 Z" fill="#E5805C" />
      <ellipse cx="178" cy="108" rx="20" ry="11" fill="#FFD0A8" opacity="0.7" transform="rotate(-26 178 108)" />
    </svg>
  );
}

export function PeachWordmark(props: {
  class?: string;
  showPip?: boolean;
  unlocked?: boolean;
}) {
  return (
    <span class={props.class ?? "peach-wordmark-wrap"}>
      <PeachMark class="peach-brand-mark" />
      <span
        class={`peach-status-pip ${props.showPip ? "" : "is-hidden"} ${props.unlocked ? "unlocked" : ""}`.trim()}
        aria-hidden="true"
      ></span>
      <span class="peach-wordmark">peach</span>
    </span>
  );
}