export function NicknameNotice({ nickname, error }: { nickname?: string; error?: string }) {
  if (!nickname && !error) return null;

  return (
    <section
      aria-live={error ? "assertive" : "polite"}
      className={`mt-8 border-l-2 bg-panel px-5 py-4 ${error ? "border-accent" : "border-signal"}`}
      role={error ? "alert" : "status"}
    >
      <p className="text-sm leading-6">
        {error ? error : <>We updated your Discord nickname to <strong>{nickname}</strong>.</>}
      </p>
      <form action="/account" className="mt-3" method="get">
        <button className="font-mono text-[10px] font-bold uppercase underline underline-offset-4" type="submit">
          Awesome, thanks!
        </button>
      </form>
    </section>
  );
}