import { useTranslation } from "react-i18next";

import { TableProps } from "../model/TableProps";

export function Table({ columns, rows }: TableProps) {
	const { t } = useTranslation("translation");

	const gridTemplateColumns = columns
		.map((col) => `minmax(200px, ${col.width}fr)`)
		.join(" ");

	return (
		<div className="flex flex-col h-full bg-white rounded-lg shadow overflow-hidden">
			{/* Scrollable Container */}
			<div className="flex-1 overflow-auto">
				{/* Header */}
				<div
					className="grid px-4 py-3 font-medium text-gray-700 bg-gray-50 border-b border-gray-200 flex-shrink-0 sticky top-0 z-10"
					style={{ gridTemplateColumns }}
				>
					{columns.map((column, index) => (
						<div
							key={`header-${index}`}
							className="flex items-center text-sm font-medium text-gray-500 uppercase tracking-wider truncate"
							title={column.label}
						>
							{column.label}
						</div>
					))}
				</div>

				{/* Body */}
				<div className="divide-y divide-gray-200">
					{rows.map((row, rowIndex) => (
						<div
							key={`row-${rowIndex}`}
							className="grid px-4 py-3 hover:bg-gray-50 transition-colors duration-150"
							style={{
								gridTemplateColumns,
								backgroundColor: row.color,
							}}
						>
							{row.values.map((cell, cellIndex) => (
								<div
									key={`cell-${rowIndex}-${cellIndex}`}
									className="flex items-center text-sm text-gray-900 truncate pr-2"
									title={
										typeof cell === "string"
											? cell
											: undefined
									}
								>
									{cell}
								</div>
							))}
						</div>
					))}

					{rows.length === 0 && (
						<div className="flex justify-center items-center p-8 text-gray-500">
							{t("No data available")}
						</div>
					)}
				</div>
			</div>
		</div>
	);
}
