---
/**
 * Greg's portrait in a gold frame, from the Page text note's `portrait`.
 * Without one, or if it fails to load, the star-chart art stands in.
 */
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
import Star from "@gk/ui/components/Star.astro";
import StarChartArt from "@gk/ui/components/StarChartArt.astro";
import type { SealName } from "@gk/ui/components/seals.ts";

interface Props {
  /** "hero": the thick gold frame on the landing; "panel": the framed panel on About. */
  variant?: "hero" | "panel";
  src?: string;
  alt?: string;
  seal?: SealName;
  class?: string;
}
const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", class: className } = Astro.props;
---
<figure class:list={["portrait", variant, className]}>
  <StarChartArt seal={seal} ratio={variant === "hero" ? "188 / 228" : "auto"} src={src} alt={alt} class="art" />
  {variant === "panel" && <GiltCorners inset={4} size={30} />}
  {variant === "hero" && <Star size={34} class="spark tl" />}
  {variant === "hero" && <Star size={24} class="spark br" />}
  {!src && <figcaption class="gk-visually-hidden">Portrait coming soon</figcaption>}
</figure>

<style>
  .portrait {
    position: relative;
    margin: 0;
  }
  .hero {
    width: 200px;
    border: 3px solid var(--gk-gold);
    border-radius: var(--gk-radius-lg);
    padding: 6px;
    background: rgba(var(--gk-violet-rgb), calc(0.12 * var(--gk-wash)));
  }
  .hero :global(.art) {
    border-radius: var(--gk-radius);
  }
  .hero :global(.photo) {
    object-position: 50% 20%;
  }
  .hero :global(.spark) {
    position: absolute;
  }
  .hero :global(.tl) {
    left: -17px;
    top: -17px;
  }
  .hero :global(.br) {
    right: -12px;
    bottom: -12px;
  }
  .panel {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
    background: var(--gk-midnight);
  }
  .panel :global(.art) {
    border-radius: 6px;
    width: 100%;
    height: 320px;
  }
  .panel :global(.photo) {
    object-position: 50% 25%;
  }
</style>