export const Breakpoint = ({ children, min, max, className = '', ...props }) => {
  if (!min && !max) {
    return null;
  }

  const breakpointMap = {
    'breakpoint-sm': { min: 'var(--breakpoint-sm)', max: 'var(--breakpoint-sm-max)' },
    'breakpoint-md': { min: 'var(--breakpoint-md)', max: 'var(--breakpoint-md-max)' },
    'breakpoint-base': { min: 'var(--breakpoint-base)', max: 'var(--breakpoint-base-max)' },
    'breakpoint-lg': { min: 'var(--breakpoint-lg)', max: 'none' },
  };

  const breakpoint = breakpointMap[min] || breakpointMap[max];
  if (!breakpoint) {
    return null;
  }

  const style = {
    '--breakpoint-min': breakpoint.min,
    '--breakpoint-max': breakpoint.max === 'none' ? '9999px' : breakpoint.max,
  };

  return (
    <div
      className={`breakpoint-container ${className}`.trim()}
      style={style}
      {...props}
    >
      {children}
    </div>
  );
};

export default Breakpoint;

