/* package whatever; // don't place package name! */
 
import java.util.*;
import java.lang.*;
import java.io.*;
 
/* Name of the class has to be "Main" only if the class is public. */
class Ideone
{
	public static void main (String[] args) throws java.lang.Exception
	{
		// your code goes here
	}
}

LyogcGFja2FnZSB3aGF0ZXZlcjsgLy8gZG9uJ3QgcGxhY2UgcGFja2FnZSBuYW1lISAqLwoKaW1wb3J0IGphdmEudXRpbC4qOwppbXBvcnQgamF2YS5sYW5nLio7CmltcG9ydCBqYXZhLmlvLio7CgovKiBOYW1lIG9mIHRoZSBjbGFzcyBoYXMgdG8gYmUgIk1haW4iIG9ubHkgaWYgdGhlIGNsYXNzIGlzIHB1YmxpYy4gKi8KY2xhc3MgSWRlb25lCnsKCXB1YmxpYyBzdGF0aWMgdm9pZCBtYWluIChTdHJpbmdbXSBhcmdzKSB0aHJvd3MgamF2YS5sYW5nLkV4Y2VwdGlvbgoJewoJCS8vIHlvdXIgY29kZSBnb2VzIGhlcmUKCX0KfQ==

JnF1b3Q7dXNlIGNsaWVudCZxdW90OzsKaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICZxdW90O3JlYWN0JnF1b3Q7OwoKZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUGFnZSgpIHsKICBjb25zdCBbbm9Db3VudCwgc2V0Tm9Db3VudF0gPSB1c2VTdGF0ZSgwKTsKICBjb25zdCBbeWVzUHJlc3NlZCwgc2V0WWVzUHJlc3NlZF0gPSB1c2VTdGF0ZShmYWxzZSk7CiAgY29uc3QgeWVzQnV0dG9uU2l6ZSA9IG5vQ291bnQgKiAyMCArIDE2OwoKICBjb25zdCBoYW5kbGVOb0NsaWNrID0gKCkgPSZndDsgewogICAgc2V0Tm9Db3VudChub0NvdW50ICsgMSk7CiAgfTsKCiAgY29uc3QgZ2V0Tm9CdXR0b25UZXh0ID0gKCkgPSZndDsgewogICAgY29uc3QgcGhyYXNlcyA9IFsKICAgICAgJnF1b3Q7Tm8mcXVvdDssCiAgICAgICZxdW90O0FyZSB5b3Ugc3VyZT8mcXVvdDssCiAgICAgICZxdW90O1JlYWxseSBzdXJlPyZxdW90OywKICAgICAgJnF1b3Q7VGhpbmsgYWdhaW4hJnF1b3Q7LAogICAgICAmcXVvdDtMYXN0IGNoYW5jZSEmcXVvdDssCiAgICAgICZxdW90O1N1cmVseSBub3Q/JnF1b3Q7LAogICAgICAmcXVvdDtZb3UgbWlnaHQgcmVncmV0IHRoaXMhJnF1b3Q7LAogICAgICAmcXVvdDtHaXZlIGl0IGFub3RoZXIgdGhvdWdodCEmcXVvdDssCiAgICAgICZxdW90O0FyZSB5b3UgYWJzb2x1dGVseSBjZXJ0YWluPyZxdW90OywKICAgICAgJnF1b3Q7VGhpcyBjb3VsZCBiZSBhIG1pc3Rha2UhJnF1b3Q7LAogICAgICAmcXVvdDtIYXZlIGEgaGVhcnQhJnF1b3Q7LAogICAgICAmcXVvdDtEb24ndCBiZSBzbyBjb2xkISZxdW90OywKICAgICAgJnF1b3Q7Q2hhbmdlIG9mIGhlYXJ0PyZxdW90OywKICAgICAgJnF1b3Q7V291bGRuJ3QgeW91IHJlY29uc2lkZXI/JnF1b3Q7LAogICAgICAmcXVvdDtJcyB0aGF0IHlvdXIgZmluYWwgYW5zd2VyPyZxdW90OywKICAgICAgJnF1b3Q7WW91J3JlIGJyZWFraW5nIG15IGhlYXJ0IDsoJnF1b3Q7LAogICAgXTsKCiAgICByZXR1cm4gcGhyYXNlc1tNYXRoLm1pbihub0NvdW50LCBwaHJhc2VzLmxlbmd0aCAtIDEpXTsKICB9OwoKICByZXR1cm4gKAogICAgJmx0O2RpdiBjbGFzc05hbWU9JnF1b3Q7ZmxleCBmbGV4LWNvbCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgaC1zY3JlZW4gLW10LTE2JnF1b3Q7Jmd0OwogICAgICB7eWVzUHJlc3NlZCA/ICgKICAgICAgICAmbHQ7Jmd0OwogICAgICAgICZsdDtpbWcgc3JjPSZxdW90O2h0dHBzOi8vbS4uLmNvbnRlbnQtYXZhaWxhYmxlLXRvLWF1dGhvci1vbmx5Li4uci5jb20vZ1VpdTF6eXhmellBQUFBaS9iZWFyLWtpc3MtYmVhci1raXNzZXMuZ2lmJnF1b3Q7IC8mZ3Q7CiAgICAgICAgJmx0O2RpdiBjbGFzc05hbWU9JnF1b3Q7dGV4dC00eGwgZm9udC1ib2xkIG15LTQmcXVvdDsmZ3Q7T2sgeWF5ISEhJmx0Oy9kaXYmZ3Q7CiAgICAgICAgJmx0Oy8mZ3Q7CiAgICAgICkgOiAoCiAgICAgICAgJmx0OyZndDsKICAgICAgICAgICZsdDtpbWcgY2xhc3NOYW1lPSZxdW90O2gtWzIwMHB4XSZxdW90OyBzcmM9JnF1b3Q7aHR0cHM6Ly9nLi4uY29udGVudC1hdmFpbGFibGUtdG8tYXV0aG9yLW9ubHkuLi5iLmNvbS9pbWFnZXMvaGlnaC9jdXRlLWxvdmUtYmVhci1yb3Nlcy1vdTd6aG81b29zeG5wbzZrLmdpZiZxdW90OyAvJmd0OwogICAgICAgICAgJmx0O2gxIGNsYXNzTmFtZT0mcXVvdDt0ZXh0LTR4bCBteS00JnF1b3Q7Jmd0O1dpbGwgeW91IGJlIG15IFZhbGVudGluZT8mbHQ7L2gxJmd0OwogICAgICAgICAgJmx0O2RpdiZndDsKICAgICAgICAgICAgJmx0O2J1dHRvbgogICAgICAgICAgICAgIGNsYXNzTmFtZT17YGJnLWdyZWVuLTUwMCBob3ZlcjpiZy1ncmVlbi03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQgbXItNGB9CiAgICAgICAgICAgICAgc3R5bGU9e3sgZm9udFNpemU6IHllc0J1dHRvblNpemUgfX0KICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9Jmd0OyBzZXRZZXNQcmVzc2VkKHRydWUpfQogICAgICAgICAgICAmZ3Q7CiAgICAgICAgICAgICAgWWVzCiAgICAgICAgICAgICZsdDsvYnV0dG9uJmd0OwogICAgICAgICAgICAmbHQ7YnV0dG9uCiAgICAgICAgICAgICAgb25DbGljaz17aGFuZGxlTm9DbGlja30KICAgICAgICAgICAgICBjbGFzc05hbWU9JnF1b3Q7IGJnLXJlZC01MDAgaG92ZXI6YmctcmVkLTcwMCB0ZXh0LXdoaXRlIGZvbnQtYm9sZCBweS0yIHB4LTQgcm91bmRlZCZxdW90OwogICAgICAgICAgICAmZ3Q7CiAgICAgICAgICAgICAge25vQ291bnQgPT09IDAgPyAmcXVvdDtObyZxdW90OyA6IGdldE5vQnV0dG9uVGV4dCgpfQogICAgICAgICAgICAmbHQ7L2J1dHRvbiZndDsKICAgICAgICAgICZsdDsvZGl2Jmd0OwogICAgICAgICZsdDsvJmd0OwogICAgICApfQogICAgJmx0Oy9kaXYmZ3Q7CiAgKTsKfQ==

"use client";
import { useState } from "react";

export default function Page() {
  const [noCount, setNoCount] = useState(0);
  const [yesPressed, setYesPressed] = useState(false);
  const yesButtonSize = noCount * 20 + 16;

  const handleNoClick = () => {
    setNoCount(noCount + 1);
  };

  const getNoButtonText = () => {
    const phrases = [
      "No",
      "Are you sure?",
      "Really sure?",
      "Think again!",
      "Last chance!",
      "Surely not?",
      "You might regret this!",
      "Give it another thought!",
      "Are you absolutely certain?",
      "This could be a mistake!",
      "Have a heart!",
      "Don't be so cold!",
      "Change of heart?",
      "Wouldn't you reconsider?",
      "Is that your final answer?",
      "You're breaking my heart ;(",
    ];

    return phrases[Math.min(noCount, phrases.length - 1)];
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen -mt-16">
      {yesPressed ? (
        <>
        <img src="https://m...content-available-to-author-only...r.com/gUiu1zyxfzYAAAAi/bear-kiss-bear-kisses.gif" />
        <div className="text-4xl font-bold my-4">Ok yay!!!</div>
        </>
      ) : (
        <>
          <img className="h-[200px]" src="https://g...content-available-to-author-only...b.com/images/high/cute-love-bear-roses-ou7zho5oosxnpo6k.gif" />
          <h1 className="text-4xl my-4">Will you be my Valentine?</h1>
          <div>
            <button
              className={`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4`}
              style={{ fontSize: yesButtonSize }}
              onClick={() => setYesPressed(true)}
            >
              Yes
            </button>
            <button
              onClick={handleNoClick}
              className=" bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
            >
              {noCount === 0 ? "No" : getNoButtonText()}
            </button>
          </div>
        </>
      )}
    </div>
  );
}