const Table = ({ columns, data, minWidth = "800px" }: { columns: any; data: any; minWidth?: string }) => {
  return (
    <div className="overflow-x-auto">
      <table className={`w-full`} style={{minWidth: minWidth}}>
        <thead className="text-white text-right">
          <tr>
            {columns.map((col: any, index: any) => (
              <th
                key={col.key}
                className={`
                  bg-[#052531] px-1 py-2 font-normal
                  ${index === 0 ? "rounded-tr-sm rounded-br-sm" : ""}
                  ${index === columns.length - 1 ? "rounded-tl-sm rounded-bl-sm text-center" : ""}
                  ${col.thClassName}
                `}
              >
                {col.header}
              </th>
            ))}
          </tr>
        </thead>

        <tbody>
          {data.map((row: any, index: any) => (
            <tr
              key={row.id ?? index}
              className={index % 2 !== 0 ? "bg-[#F1F5F9]" : ""}
            >
              {columns.map((col: any) => (
                <td key={col.key} className={col.tdClassName}>
                  {col.render
                    ? col.render(row)
                    : row[col.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;