import { Table, TableBody, TableCell, TableRow } from "./ui/table";

export function PopupAttribute({ popupData }: { popupData: Record<string, unknown>[] }) {
  const keys = popupData.length > 0 ? Object.keys(popupData[0]) : [];

  return (
    <>
      <div className="max-w-[460px] max-h-[300px] overflow-y-auto overflow-x-auto">
        <Table className="mt-1 w-full text-[12px] ">
          <TableBody>
            {keys.map((k) => (
              <TableRow key={k} className="even:bg-gray-50">
                <TableCell className="py-2 align-top font-semibold text-zinc-800 whitespace-normal break-words pr-4 min-w-[120px]">{k}</TableCell>
                {popupData.map((row, idx) => (
                  <TableCell key={idx} className="py-2 align-top whitespace-normal break-words max-w-[300px] text-zinc-700">
                    {row[k] === null ? "—" : Array.isArray(row[k]) ? (row[k] as unknown[]).join(", ") : typeof row[k] === "object" ? JSON.stringify(row[k]) : String(row[k] ?? "")}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </>
  );
}