planpost-offer-landing/src/components/FeatureSection.tsx

import Image from "next/image";
import React from "react";

interface DesignToolProps {
  // Section title
  titleColoredText: string;
  titleBoldText: string;
  description: string;

  // Main card content
  imageUrl: string;
  imageAlt: string;
  backgroundColor: string;
  imagePosition: string; // New prop to control image position

  // Right side content
  headingText: string;
  coloredHeading: string;
  paragraphText: string;
  highlightedBrandName: string;
  highlightedFeature: string;

  // Feature list
  features: string[];

  // CTA button
  ctaText: string;
  ctaBackgroundColor: string;
  ctaTextColor: string;

  // Optional className for additional styling
  className?: string;
}

const FeatureSection: React.FC<DesignToolProps> = ({
  titleColoredText,
  titleBoldText,
  description,
  imageUrl,
  imageAlt,
  backgroundColor,
  imagePosition = "left",
  headingText,
  coloredHeading,
  paragraphText,
  highlightedBrandName,
  highlightedFeature,
  features,
  ctaText,
  ctaBackgroundColor,
  ctaTextColor,
  className,
}) => {
  // Determine border radius based on image position
  const imageContainerClasses =
    imagePosition === "left"
      ? "rounded-tl-[40px] rounded-bl-[40px]"
      : "rounded-tr-[40px] rounded-br-[40px]";

  // Create the image container and content container
  const imageContainer = (
    <div
      className={`w-full  rotate-180 ${imageContainerClasses}`}
      style={{ backgroundColor }}
    >
      <div className="rotate-180 ">
        <Image
          className="clip-path"
          src={imageUrl}
          alt={imageAlt}
          width={684}
          height={491}
        />
      </div>
    </div>
  );

  const contentContainer = (
    <div className="details-box-content p-[50px]">
      <div className="">
        <span className="text-[#252525] text-2xl font-bold font-['Inter'] leading-normal">
          {headingText}
        </span>
        <span className="text-[#6a47ed] text-[56px] font-bold font-['Inter'] leading-[56px] block">
          {coloredHeading}
        </span>
      </div>

      <div className=" my-4">
        <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
          {paragraphText.split(highlightedBrandName)[0]}
        </span>
        <span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
          {highlightedBrandName}
        </span>
        <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
          {
            paragraphText
              .split(highlightedBrandName)[1]
              .split(highlightedFeature)[0]
          }
        </span>
        <span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
          {highlightedFeature}
        </span>
        <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
          {paragraphText.split(highlightedFeature)[1]}
        </span>
      </div>

      <div className="h-36 flex-col justify-start items-start gap-4 inline-flex">
        {features.map((feature, index) => (
          <div
            key={index}
            className="px-2.5 justify-center items-center gap-2.5 inline-flex"
          >
            <div className="w-5 h-5 justify-center items-center flex">
              <div className="w-5 h-5 relative">
                <Image
                  src="/assets/svg/tick-square.svg"
                  alt="checkmark"
                  width={20}
                  height={20}
                />
              </div>
            </div>
            <div className="text-[#252525] text-base font-normal font-['Inter'] leading-normal">
              {feature}
            </div>
          </div>
        ))}
      </div>

      <div className="my-10 inline-block">
        <div
          className="p-[5px] rounded-[14px]"
          style={{ backgroundColor: `${ctaBackgroundColor}30` }}
        >
          <div
            className="p-[5px] rounded-[14px]"
            style={{ backgroundColor: `${ctaBackgroundColor}30` }}
          >
            <div
              className="py-[14px] px-[22px] rounded-lg"
              style={{ backgroundColor: ctaBackgroundColor }}
            >
              <p
                className="text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
                style={{ color: ctaTextColor }}
              >
                {ctaText}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <section className={`design-tool my-20 ${className || ""}`}>
      <div className="section-title text-center my-5">
        <div>
          <span className="text-[#6a47ed] text-5xl font-light font-['Inter'] leading-[48px]">
            {titleColoredText}
          </span>
          <span className="text-[#252525] text-5xl font-bold font-['Inter'] leading-[48px]">
            {" " + titleBoldText}
          </span>
        </div>
        <div className="w-full max-w-[1008px] mx-auto text-center text-[#9b97bb] text-base font-normal font-['Inter'] leading-normal">
          {description}
        </div>
      </div>

      <div className="details-card">
        <div className="w-11/12 xl:w-10/12 py-10 flex gap-x-5 items-center mx-auto bg-white rounded-[40px] overflow-hidden">
          {imagePosition === "left" ? (
            <>
              {imageContainer}
              {contentContainer}
            </>
          ) : (
            <>
              {contentContainer}
              {imageContainer}
            </>
          )}
        </div>
      </div>
    </section>
  );
};

export default FeatureSection;