import React, {FC, ReactNode} from "react";
import field from "../../Field";

export type GridField = {
    title: string,
    description?: string,
    field: ReactNode
}
export type FieldsGridProps = {
    fields: GridField[];
}

export const FieldsGrid: FC<FieldsGridProps> = ({fields}) => {
    return <div className={'space-y-4 px-5 py-5 rounded-2 border-[2px] border-gray-150'}>
        {fields.map(({title, description, field}) => <div className="grid grid-cols-2 gap-x-2 gap-y-5 items-center">
                <div className="space-y-1">
                    <h2 className="text-1x text-gray-650">{title}</h2>
                    {description &&
                        <p className="text-gray-450 text-smaller-1 leading-[18px]]">{description}</p>}
                </div>
                <div className="w-full flex justify-end">
                    {field}
                </div>
            </div>
        )}
    </div>
}