import Head from "next/head";
import Image from "next/image";

function MakePoem() {
  return (
    <div className="flex flex-col space-y-4 mx-4 py-4">
      <div>
        <p>
          You are important. I wrote a small poem I hope will help you today.
        </p>
        <p>
          It&#39;s not very long, but I&#39;m doing my best, and so are you.
        </p>
      </div>
      <div>
        <p>You are the moon, you are the stars</p>
        <p>Im glad you&#39;re here, whomever you are.</p>
        <p>We&#39;ve been through much; in this life it&#39;s true,</p>
        <p>But in the end, you will come through.</p>
      </div>
      <div>
        <p>Much like life, this poem is short</p>
        <p>It doesn&#39;t always rhyme, or have a nice beat;</p>
        <p>It might seem wrong, or incomplete;</p>
        <p>It might go on, or so it seems;</p>
        <p>It might feel like you&#39;re in a dream.</p>
      </div>
      <div>
        <p>That&#39;s not the point, I know in my heart</p>
        <p>I&#39;m glad you&#39;re here, whomever you are.</p>
      </div>
    </div>
  );
}

export default function Letter() {
  return (
    <div className="min-h-screen font-nerd bg-alice-werefox-grey-light dark:bg-alice-werefox-grey">
      <Head>
        <title>Happy Valentine&#39;s Day</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="container space-y-4 mx-auto p-4">
        <div className="flex justify-center py-8">
          <div className="animate-growshrink">
            <div className="relative h-48 w-48">
              <Image
                src="/images/heart-icon.png"
                className=""
                alt="logo"
                fill
              />
            </div>
          </div>
        </div>
        <div className="flex-col space-y-4">
          <p className="mx-auto max-w-fit flex justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
            You are important and loved
          </p>

          <details className="mx-auto max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
            <summary className="flex justify-center border-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
              Tell Me More
            </summary>
            <MakePoem />
          </details>
        </div>
      </div>
    </div>
  );
}
