---

export const prerender = false;

import PageLayout from "@/layouts/Base.astro";

import { getFormattedDate } from "@/utils";

type Artwork = {

	date: string;

	artwork_id: number;

	title: string;

	artist_display: string | null;

	date_display: string | null;

	medium_display: string | null;

	dimensions: string | null;

	place_of_origin: string | null;

	credit_line: string | null;

	short_description: string | null;

	image_id: string | null;

	image_url: string | null;

	source_url: string | null;

};

const meta = {

	title: "/art-calendar",

	description:

		"A different painting every day from the Art Institute of Chicago.",

};

const FEED_URL = "https://easel.stevedylan.dev/feed.xml";

const today = new Date();

let artwork: Artwork | null = null;

let error: string | null = null;

try {

	const res = await fetch("https://easel.stevedylan.dev/api/today", {

		headers: { Accept: "application/json" },

	});

	if (!res.ok) throw new Error(`easel returned ${res.status}`);

	artwork = (await res.json()) as Artwork;

} catch (e) {

	error = e instanceof Error ? e.message : "Failed to reach easel API";

}

Astro.response.headers.set(

	"Cache-Control",

	"public, max-age=3600, s-maxage=86400",

);

---

<PageLayout meta={meta}>

  <div class="flex min-h-screen flex-col items-start justify-start gap-6">

    <div class="flex flex-col gap-1 w-full">

      <div class="flex flex-row justify-between items-center w-full">

        <h1 class="title">/art-calendar</h1>

        <div class="flex gap-2 items-center">

          <a

            class="inline-block p-2 sm:hover:text-link"

            href={FEED_URL}

            target="_blank"

            rel="noopener noreferrer"

          >

            <svg

              xmlns="http://www.w3.org/2000/svg"

              class="h-6 w-6"

              viewBox="0 0 24 24"

              stroke-width="1.5"

              stroke="currentColor"

              fill="none"

              stroke-linecap="round"

              stroke-linejoin="round"

            >

              <g

                fill="none"

                stroke="currentColor"

                stroke-linecap="round"

                stroke-linejoin="round"

                stroke-width="2"

                ><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"

                ></path><circle cx="5" cy="19" r="1"></circle></g

              >

            </svg>

            <span class="sr-only">RSS</span>

          </a>

        </div>

      </div>

      <p class="text-sm opacity-70">

        {getFormattedDate(today)}

      </p>

    </div>

    {

      error || !artwork ? (

        <p class="text-red-400 text-sm">

          Couldn't load today's painting{error ? `: ${error}` : ""}.

        </p>

      ) : (

        <article class="flex flex-col w-full gap-6">

          {artwork.image_url && (

            <img

              src={artwork.image_url}

              alt={artwork.title}

              loading="eager"

              class="w-full h-auto"

            />

          )}

          <div class="flex flex-col gap-1">

            <h2 class="text-xl italic text-accent-2">{artwork.title}</h2>

            {artwork.artist_display && (

              <p class="text-sm whitespace-pre-line">

                {artwork.artist_display}

              </p>

            )}

          </div>

          <dl class="grid grid-cols-1 sm:grid-cols-[max-content_1fr] gap-x-6 gap-y-2 text-sm">

            {artwork.date_display && (

              <>

                <dt class="opacity-50 uppercase tracking-widest text-xs">

                  Date

                </dt>

                <dd>{artwork.date_display}</dd>

              </>

            )}

            {artwork.place_of_origin && (

              <>

                <dt class="opacity-50 uppercase tracking-widest text-xs">

                  Origin

                </dt>

                <dd>{artwork.place_of_origin}</dd>

              </>

            )}

            {artwork.medium_display && (

              <>

                <dt class="opacity-50 uppercase tracking-widest text-xs">

                  Medium

                </dt>

                <dd>{artwork.medium_display}</dd>

              </>

            )}

            {artwork.dimensions && (

              <>

                <dt class="opacity-50 uppercase tracking-widest text-xs">

                  Dimensions

                </dt>

                <dd>{artwork.dimensions}</dd>

              </>

            )}

            {artwork.credit_line && (

              <>

                <dt class="opacity-50 uppercase tracking-widest text-xs">

                  Credit

                </dt>

                <dd>{artwork.credit_line}</dd>

              </>

            )}

          </dl>

          {artwork.short_description && (

            <p class="text-sm">{artwork.short_description}</p>

          )}

          {artwork.source_url && (

            <a

              class="style-link self-start"

              href={artwork.source_url}

              target="_blank"

              rel="noopener"

            >

              View on artic.edu

            </a>

          )}

        </article>

      )

    }

  </div>

</PageLayout>