---
interface Props {
  fillNotches: "left" | "right" | "both" | "none";
  color?: string;
}

const { fillNotches = "none", color = "gold" } = Astro.props;

---

<div class={`container notch-${fillNotches}`} style={`background-color: var(--color-${color})`}>
  <div class="content">
    <slot />
  </div>
</div>

<style>
.container {
  height: 100%;
  width: 100%;
  padding: 1px;
  background-color: var(--color-gold);
}

.notch-left {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%
  );
}

.notch-right {
  clip-path: polygon(
    0 16px,
    16px 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.notch-none {
  clip-path: polygon(
    0 16px,
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%
  );
}

.content {
  height: calc(100% - 16px);
  width: calc(100% - 40px);
  background-color: var(--color-space-blue);
  padding: 8px 20px;
  clip-path: polygon(
    0 16px,
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%
  );
}
</style>
