import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
import { 
	Table, 
	TableBody, 
	TableCell, 
	TableHead, 
	TableHeader, 
	TableRow 
} from "@/shadcn/components/ui/table";
import { flexRender, Table as ReactTable } from "@tanstack/react-table";

interface Props<TData> {
	table: ReactTable<TData>;
}

export default function DashboardTable<T>({ table }: Props<T>) {
	return (
		<div className="w-full max-w-full overflow-x-auto border rounded-lg">
			<Table className="min-w-full divide-y divide-muted-foreground bg-white">
				<TableHeader>
				{table.getHeaderGroups().map((headerGroup) => (
					<TableRow key={headerGroup.id}>
					{headerGroup.headers.map((header) => (
						<TableHead
						key={header.id}
						className={`px-6 py-3 text-left text-sm font-medium text-muted-foreground ${header.column.columnDef.header === 'Status' ? 'text-center' : ''}`}
						style={{
							maxWidth: `${header.column.columnDef.maxSize}px`,
							width: `${header.getSize()}`,
						}}
						>
						{header.isPlaceholder
							? null
							: flexRender(header.column.columnDef.header, header.getContext())}
						</TableHead>
					))}
					</TableRow>
				))}
				</TableHeader>

				<TableBody>
				{table.getRowModel().rows.length > 0 ? (
					table.getRowModel().rows.map((row) => (
					<TableRow key={row.id}>
						{row.getVisibleCells().map((cell) => (
						<TableCell
							key={cell.id}
							className="px-6 py-4 whitespace-nowrap text-sm text-black"
							style={{
							maxWidth: `${cell.column.columnDef.maxSize}px`,
							whiteSpace: "normal",
							wordWrap: "break-word",
							}}
						>
							{flexRender(cell.column.columnDef.cell, cell.getContext())}
						</TableCell>
						))}
					</TableRow>
					))
				) : (
					<TableRow>
					<TableCell colSpan={table.getAllColumns().length} className="px-6 py-4 text-center text-sm text-gray-500">
						- No Data -
					</TableCell>
					</TableRow>
				)}
				</TableBody>
			</Table>
		</div>
	);
}