import React from "react";

const Section = ({
  id,
  bgColor,
  textColor,
  children,
  hasTopSeparator,
  hasBottomSeparator,
  nextBgColor,
}) => {
  return (
    <section id={id} className={`${bgColor} ${textColor}`}>
      {/* Top Separator (only for middle sections) */}
      {hasTopSeparator && (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100"
          viewBox="0 0 1200 100"
          preserveAspectRatio="none"
        >
          <polygon
            points="0,0 1200,0 1200,100 0,100"
            style={{ fill: bgColor === "bg-[#181818]" ? "#232323" : "#181818" }}
          />
          <polygon
            points={
              bgColor === "bg-[#181818]"
                ? "0,100 1200,0 1200,100 0,100" // Upward diagonal
                : "0,0 1200,100 1200,0 0,0" // Downward diagonal
            }
            style={{ fill: bgColor === "bg-[#181818]" ? "#181818" : "#232323" }}
          />
        </svg>
      )}

      {/* Section Content */}
      {children}

      {/* Bottom Separator (for all sections except the last) */}
      {hasBottomSeparator && (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100"
          viewBox="0 0 1200 100"
          preserveAspectRatio="none"
        >
          <polygon
            points="0,0 1200,0 1200,100 0,100"
            style={{ fill: nextBgColor }}
          />
          <polygon
            points={
              bgColor === "bg-[#181818]"
                ? "0,0 1200,100 1200,0 0,0" // Downward diagonal
                : "0,100 1200,0 1200,100 0,100" // Upward diagonal
            }
            style={{ fill: bgColor === "bg-[#181818]" ? "#181818" : "#232323" }}
          />
        </svg>
      )}
    </section>
  );
};

export default Section;