import React from 'react';
import { useScreenSize } from '../../utils/responsive';

const ResponsiveContainer = ({ 
  children, 
  mobileClassName = '',
  tabletClassName = '',
  desktopClassName = '',
  className = '' 
}) => {
  const { isMobile, isTablet, isDesktop } = useScreenSize();

  const getResponsiveClass = () => {
    if (isMobile) return mobileClassName;
    if (isTablet) return tabletClassName;
    return desktopClassName;
  };

  return (
    <div className={`${getResponsiveClass()} ${className}`}>
      {children}
    </div>
  );
};

export default ResponsiveContainer;