interface TableProps {
  headers: string[];
  data: any[];
  className?: string;
  children?: React.ReactNode;  // Add children here
}

const Table: React.FC<TableProps> = ({ headers, data, className = '', children }) => {
  return (
    <div className={`overflow-x-auto ${className}`}>
      <table className="min-w-full bg-white border border-gray-300">
        <thead>
          <tr>
            {headers.map((header, index) => (
              <th key={index} className="px-6 py-3 text-left text-sm font-medium text-gray-600">
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr key={index} className="border-t">
              {Object.values(row).map((value, idx) => (
                <td key={idx} className="px-6 py-4 text-sm text-gray-800">
                  {value as React.ReactNode}
                </td>
              ))}
            </tr>
          ))}
          {children}  {/* This will allow you to pass additional content */}
        </tbody>
      </table>
    </div>
  );
};

export default Table;