import React from "react";

interface StepProps {
  stepNumber: number;
  description: string;
  iconPath: string;
}

export default function Page({ stepNumber, description, iconPath }: StepProps) {
  const StepContent = ({
    stepNumber,
    description,
    className,
  }: {
    stepNumber: number;
    description: string;
    className: string;
  }) => {
    return (
      <div className={className}>
        <h6 className="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-gray-700">
          Step {stepNumber}
        </h6>
        <p className="block font-sans text-base antialiased font-normal leading-relaxed text-gray-700">
          {description}
        </p>
      </div>
    );
  };

  return (
    <>
      <div className="relative z-10 grid w-20 h-20 font-bold text-white transition-all duration-300 bg-primary rounded-full place-items-center mb-4 xl:mb-0">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          stroke="currentColor"
          aria-hidden="true"
          className="w-10 h-10"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d={iconPath}
          ></path>
        </svg>
        <StepContent
          stepNumber={stepNumber}
          description={description}
          className="hidden xl:block absolute -bottom-[4.5rem] w-max text-center"
        />
      </div>
      <StepContent
        stepNumber={stepNumber}
        description={description}
        className="block xl:hidden mb-8 w-max text-center"
      />
    </>
  );
}