import { LayoutField as LayoutFieldType, SchemaFieldProps } from '@vev/utils';
import React from 'react';
import { SilkeBox } from '../../silke-box';
import { SilkeSchemaFields } from '../silke-schema-fields';

export default function LayoutField({
  value = {},
  schema,
  disabled,
  readonly,
}: SchemaFieldProps<LayoutFieldType>) {
  const display = schema?.options?.display;

  return (
    <SilkeBox column flex gap="s" vPad="s">
      <SilkeSchemaFields
        schema={(schema as any).fields}
        value={value}
        disabled={disabled}
        readonly={readonly}
        noPad
        row={!display || display === 'row'}
      />
    </SilkeBox>
  );
}