import ResponsiveField from '@apps/websites/admin/components/responsivefield'
import SpacingField from '@apps/websites/admin/components/spacingfield'
import React from 'react'

export const Margin = (props) => <ResponsiveField { ...props } component={ SpacingField } />
export const Padding = (props) => <ResponsiveField { ...props } component={ SpacingField } />

export const SpacingSection = (config, device, website) => ({
  label: 'Spacing',
  collapsing: true,
  collapsed: true,
  fields: [
    { label: 'Margin', name: 'styles.margin', device, type: Margin, value: config.styles.margin },
    { label: 'Padding', name: 'styles.padding', device, type: Padding, value: config.styles.padding }
  ]
})
