import React, { forwardRef, ForwardedRef, ElementType, ComponentPropsWithoutRef } from 'react';

type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;

interface BoxProps<T extends ElementType> {
  as?: T;
  children?: React.ReactNode;
  className?: string;
  center?: boolean;
  fullWidth?: boolean;
  fullHeight?: boolean;
  m?: Spacing;
  mt?: Spacing;
  mb?: Spacing;
  ml?: Spacing;
  mr?: Spacing;
  mx?: Spacing | 'auto';
  my?: Spacing;
  p?: Spacing;
  pt?: Spacing;
  pb?: Spacing;
  pl?: Spacing;
  pr?: Spacing;
  px?: Spacing;
  py?: Spacing;
  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
  position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
  maxWidth?: string;
}

export const Box = forwardRef(<T extends ElementType = 'div'>(
  { 
    as, 
    children, 
    className = '', 
    center = false,
    fullWidth = false,
    fullHeight = false,
    m, mt, mb, ml, mr, mx, my,
    p, pt, pb, pl, pr, px, py,
    display,
    position,
    overflow,
    maxWidth,
    ...props 
  }: BoxProps<T> & ComponentPropsWithoutRef<T>,
  ref: ForwardedRef<any>
) => {
  const Tag = (as as any) || 'div';
  
  const spacingMap: Record<string | number, string> = {
    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96',
    'auto': 'auto'
  };

  const classes = [
    center ? 'flex items-center justify-center' : '',
    fullWidth ? 'w-full' : '',
    fullHeight ? 'h-full' : '',
    m !== undefined ? `m-${spacingMap[m]}` : '',
    mt !== undefined ? `mt-${spacingMap[mt]}` : '',
    mb !== undefined ? `mb-${spacingMap[mb]}` : '',
    ml !== undefined ? `ml-${spacingMap[ml]}` : '',
    mr !== undefined ? `mr-${spacingMap[mr]}` : '',
    mx !== undefined ? `mx-${spacingMap[mx]}` : '',
    my !== undefined ? `my-${spacingMap[my]}` : '',
    p !== undefined ? `p-${spacingMap[p]}` : '',
    pt !== undefined ? `pt-${spacingMap[pt]}` : '',
    pb !== undefined ? `pb-${spacingMap[pb]}` : '',
    pl !== undefined ? `pl-${spacingMap[pl]}` : '',
    pr !== undefined ? `pr-${spacingMap[pr]}` : '',
    px !== undefined ? `px-${spacingMap[px]}` : '',
    py !== undefined ? `py-${spacingMap[py]}` : '',
    display ? display : '',
    position ? position : '',
    overflow ? `overflow-${overflow}` : '',
    className
  ].filter(Boolean).join(' ');

  const style = maxWidth ? { maxWidth, ...((props as any).style || {}) } : (props as any).style;

  return (
    <Tag ref={ref} className={classes} {...props} style={style}>
      {children}
    </Tag>
  );
});

Box.displayName = 'Box';