import { StylerBaseProps } from '@/src/types/builder';
import { SliderWithInput } from '@/components/common/SliderWithInput';

export function PaddingControl({ styling, onStylingChange }: StylerBaseProps) {
  const handlePaddingChange = (position: 'top' | 'bottom' | 'left' | 'right', value: number) => {
    onStylingChange({ ...styling, padding: { ...(styling?.padding || {}), [position]: value } });
  };

  return (
    <div className='space-y-3 mt-4'>
      <h3 className='text-sm font-medium text-neutral-300'>Padding</h3>
      <div className='space-y-3'>
        {['top', 'bottom', 'left', 'right'].map((position) => (
          <div key={position} className='space-y-1'>
            <SliderWithInput
              label={position.charAt(0).toUpperCase() + position.slice(1)}
              value={styling?.padding?.[position as 'top' | 'bottom' | 'left' | 'right'] ?? 0}
              min={0}
              max={100}
              step={4}
              unit='px'
              onChange={(values) =>
                handlePaddingChange(position as 'top' | 'bottom' | 'left' | 'right', values ?? 0)
              }
            />
          </div>
        ))}
      </div>
    </div>
  );
}
