type OrganicBlobProps = {
  className?: string;
  tone?: "rose" | "sage" | "cream" | "mauve";
};

const tones: Record<NonNullable<OrganicBlobProps["tone"]>, string> = {
  rose: "bg-anouma-rose-soft",
  sage: "bg-anouma-sage",
  cream: "bg-anouma-cream-beige-2",
  mauve: "bg-anouma-mauve",
};

/** Purely decorative, blurred organic shape used to add warmth behind content. */
export function OrganicBlob({ className = "", tone = "rose" }: OrganicBlobProps) {
  return (
    <div
      aria-hidden="true"
      className={`pointer-events-none absolute rounded-[60%_40%_65%_35%/45%_55%_45%_55%] opacity-40 blur-3xl ${tones[tone]} ${className}`}
    />
  );
}