import React, { PropsWithChildren } from "react";

type Props = PropsWithChildren<{
    step: string;
    title: string;
}>;

export const StepItem: React.FC<Props> = (props) => {
    const {
        step,
        title,
        children
    } = props;

    return (
        <div>
            <div className="pb-5 text-center">
                <div className="relative bg-neutral-300 p-4 text-lg uppercase before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-t-[20px] before:border-r-[20px] before:border-l-[20px] before:border-t-neutral-300 before:border-r-transparent before:border-l-transparent">
                    <h2>{step}</h2>
                    <p>{title}</p>
                </div>
            </div>

            <div className='mx-auto max-w-120 px-4 py-10'>{children}</div>
        </div>
    );
};