import React, {FC, PropsWithChildren, ReactNode} from "react";
import classNames from "classnames";

export type FieldSectionProps = {
    title?: string | ReactNode
    description?: string | ReactNode
}

export const FieldSection: FC<FieldSectionProps & PropsWithChildren> = ({title, description, children}) => {
    return <div className={classNames('space-y-2 w-full', {
    })} style={{textWrap: 'initial'}}>
        <div className="px-4">
            <h2 className="text-1x text-gray-550">{title}</h2>
            {description && <p className="text-gray-400 text-smaller-1 leading-[18px]]">{description}</p>}
        </div>
        <div className="w-full">{children}</div>
    </div>
}