---
/** A row link inside a landing or About door: a title, an optional line, and an arrow. */
import Icon from "@gk/ui/components/Icon.astro";

interface Props {
  href: string;
  title: string;
  line?: string;
  size?: "large" | "small";
}
const { href, title, line, size = "large" } = Astro.props;
---
<li>
  <a href={href} class:list={["door-link", size]}>
    <span class="words">
      <span class="t">{title}</span>
      {line && <span class="l">{line}</span>}
    </span>
    <Icon name="arrow-right" size={size === "large" ? 22 : 16} />
  </a>
</li>

<style>
  li {
    list-style: none;
  }
  .door-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--gk-starlight);
    text-decoration: none;
    transition: color var(--gk-ease);
  }
  .door-link:hover {
    color: var(--gk-gold-bright);
  }
  .large {
    min-height: 62px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--gk-star-rgb), 0.35);
  }
  .small {
    min-height: 48px;
    border-top: 1px solid var(--gk-lines);
    font-weight: 600;
  }
  .words {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .large .t {
    font-family: var(--gk-font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.05em;
  }
  .l {
    font-size: 14px;
    color: var(--gk-soft);
  }
  .door-link :global(svg) {
    flex: none;
  }
</style>