'use client';
import { WrapperProps } from '@/types/common';

export default function Wrapper({ className = '', id, children, styling, inline = false, style }: WrapperProps) {
  const styleObj: React.CSSProperties = {
    alignItems: styling?.align,
    justifyContent: styling?.align,
    color: styling?.textColor,
    backgroundColor: styling?.backgroundColor,
    paddingLeft: styling?.padding?.left ?? '10px',
    paddingRight: styling?.padding?.right ?? '10px',
    paddingTop: styling?.padding?.top ?? '20px',
    paddingBottom: styling?.padding?.bottom ?? '20px',
    fontSize: styling?.fontSize ? Math.min(styling?.fontSize ?? 16, 100) : style?.fontSize,
    fontFamily: styling?.fontFamily,
    fontWeight: styling?.fontWeight,
    textDecoration: styling?.textDecoration,
    fontStyle: styling?.fontStyle,
  };

  return (
    <div style={{ backgroundColor: styling?.backgroundColor }}>
      <div
        className={`builder ${!inline ? 'w-full max-w-[1366px] mx-auto  text-[var(--color-text)]' : ''} ${className}`}
        id={id}
        style={styleObj}
      >
        {children}
      </div>
    </div>
  );
}
