import React from "react";

export function WedgeDown({ fill }: { fill: string }) {
  return (
    <div
      style={{
        position: "absolute",
        bottom: 0,
        left: 0,
        right: 0,
        height: 120,
        overflow: "hidden",
        pointerEvents: "none",
        zIndex: 10,
      }}
    >
      <svg
        viewBox="0 0 1440 120"
        style={{ position: "absolute", bottom: 0, width: "100%", display: "block" }}
        preserveAspectRatio="none"
      >
        <polygon points="0,120 1440,0 1440,120" fill={fill} />
      </svg>
    </div>
  );
}

export function WedgeUp({ fill }: { fill: string }) {
  return (
    <div
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        height: 120,
        overflow: "hidden",
        pointerEvents: "none",
        zIndex: 10,
      }}
    >
      <svg
        viewBox="0 0 1440 120"
        style={{ position: "absolute", top: 0, width: "100%", display: "block" }}
        preserveAspectRatio="none"
      >
        <polygon points="0,0 1440,120 0,120" fill={fill} />
      </svg>
    </div>
  );
}