// ResultSection.jsx
import React from "react";

const ResultSection = ({
  trialLocation,
  trialType,
  startDate,
  endDate,
  totalDuration,
  variety,
  packaging,
  imgSrc,
  imgAlt,
}) => {
  return (
    <div style={{ marginBottom: "20px" }}>
      {/* Results Block */}
      <div
        style={{
          marginLeft: "100px",
          marginTop: "20px",
          fontSize: "20px",
          fontWeight: "500",
          lineHeight: "1.3",
          color: "black",
          textAlign: "center",
        }}
      >
        <p style={{ fontSize: "24px", fontWeight: "700" }}>Results</p>
        <p>
          Trial Location : <span style={{ color: "green" }}>{trialLocation}</span>
        </p>
        <p>
          TRIAL TYPE : <span style={{ color: "green" }}>{trialType}</span>
        </p>
        <p>
          START DATE :{" "}
          <span style={{ color: "green" }}>
            {startDate} &nbsp;&nbsp;
            <span style={{ color: "black" }}>END DATE : </span>
            {endDate}
          </span>
        </p>
        <p>
          TOTAL DURATION :{" "}
          <span style={{ color: "green" }}>{totalDuration}</span>
        </p>
        <p>
          VARIETY : <span style={{ color: "green" }}>{variety}</span>
        </p>
        <p>
          <span style={{ backgroundColor: "yellow" }}>{packaging}</span>
        </p>
      </div>

      {/* Image */}
      <img
        src={imgSrc}
        alt={imgAlt}
        style={{
          width: "1000px",
          height: "550px",
          marginLeft: "200px",
          marginTop: "-100px",
          marginBottom: "10px",
        }}
      />

      {/* Before & After */}
      <p
        style={{
          marginTop: "-100px",
          marginLeft: "380px",
          fontWeight: "700",
        }}
      >
        BEFORE
      </p>
      <p
        style={{
          marginTop: "-40px",
          marginLeft: "900px",
          fontWeight: "700",
        }}
      >
        AFTER
      </p>
    </div>
  );
};

export default ResultSection;
