---
interface Props {
  hue: "teal" | "amber" | "rust" | "slate" | "olive";
  logo?: string;
  company: string;
  size?: "thumb" | "hero";
}
const { hue, logo, company, size = "thumb" } = Astro.props;
---

<div class={`cover ${size} hue-${hue}`}>
  {
    logo ? (
      <img src={logo} alt={`${company} logo`} class="logo" />
    ) : (
      <svg class="mark" viewBox="0 0 24 24" aria-hidden="true">
        <use href="#robot-icon" />
      </svg>
    )
  }
</div>

<style>
  .cover {
    --ink-c: var(--hue-teal-ink);
    --wash-c: var(--hue-teal-wash);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background:
      radial-gradient(var(--ink-c) 1px, transparent 1.6px) 0 0 / 12px 12px,
      var(--wash-c);
    overflow: hidden;
    flex-shrink: 0;
  }
  .cover.hue-amber { --ink-c: var(--hue-amber-ink); --wash-c: var(--hue-amber-wash); }
  .cover.hue-rust { --ink-c: var(--hue-rust-ink); --wash-c: var(--hue-rust-wash); }
  .cover.hue-slate { --ink-c: var(--hue-slate-ink); --wash-c: var(--hue-slate-wash); }
  .cover.hue-olive { --ink-c: var(--hue-olive-ink); --wash-c: var(--hue-olive-wash); }

  .cover .mark {
    position: absolute;
    fill: var(--ink-c);
    opacity: 0.5;
  }
  .cover .logo {
    position: relative;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
  }

  .cover.thumb { width: 88px; height: 88px; }
  .cover.thumb .mark { width: 52px; height: 52px; right: -8px; bottom: -8px; }
  .cover.hero { width: 100%; height: 168px; margin-bottom: 26px; }
  .cover.hero .mark { width: 110px; height: 110px; right: 18px; bottom: -20px; }

  @media (max-width: 620px) {
    .cover.thumb { width: 64px; height: 64px; }
    .cover.thumb .mark { width: 38px; height: 38px; }
  }
</style>