import React from 'react';

interface TableContainerProps {
  title: string;
  children: React.ReactNode;
  buttons?: React.ReactNode;
  className?: string;
}

const TableContainer: React.FC<TableContainerProps> = ({
  title,
  children,
  buttons,
  className = ''
}) => {
  return (
    <div className={`w-full bg-white rounded-lg shadow-sm overflow-hidden ${className}`}>
      <div className="w-full">
        <div className="border-b border-gray-200">
          <div className="px-4 sm:px-6 py-4">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <h1 className="text-lg sm:text-xl font-semibold text-gray-900">{title}</h1>
              {buttons && (
                <div className="flex flex-wrap items-center gap-2">
                  {buttons}
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="w-full overflow-hidden">
          {children}
        </div>
      </div>
    </div>
  );
};

export default TableContainer;