import {
  type NoSerialize,
  component$,
  noSerialize,
  useSignal,
} from "@builder.io/qwik";
import { useXLSXRenderer,XLSXTable } from "qwik-excel-renderer";

export default component$(() => {
  const { xlsxRenderer, data } = useXLSXRenderer();
  const file = useSignal<NoSerialize<File>>();
  return (
      <div>
        <input
          type="file"
          onChange$={(e) => {
            file.value = noSerialize((e.target as HTMLInputElement).files?.[0]);
          }}
        />
        <button
          onClick$={async () => {
            await xlsxRenderer(file.value);
          }}
        >
          Render XLSX data
        </button>

        {data && (
          <div>
            <XLSXTable data={data} />
          </div>
        )}
      </div>
  );
});