import type { Component } from 'solid-js';
import { createMemo } from 'solid-js';
import { SSDataTable, SSHeader, SSSurface } from 'src';
import { demoRows, renderStatus } from '../../demo/content';

const DataPage: Component = () => {
  const columns = createMemo(() => [
    {
      label: 'Name',
      render: (row: (typeof demoRows)[number]) => row.name,
      sortKey: (row: (typeof demoRows)[number]) => row.name,
    },
    {
      label: 'Role',
      render: (row: (typeof demoRows)[number]) => row.role,
      sortKey: (row: (typeof demoRows)[number]) => row.role,
    },
    {
      label: 'Status',
      render: (row: (typeof demoRows)[number]) => renderStatus(row.status),
      sortKey: (row: (typeof demoRows)[number]) => row.status,
    },
    {
      label: 'Updated',
      render: (row: (typeof demoRows)[number]) => row.updated,
      sortKey: (row: (typeof demoRows)[number]) => row.updated,
    },
  ]);

  return (
    <div class="demo_page">
      <SSHeader title="Data table" subtitle="Sorting, paging, and quick actions." />
      <SSDataTable
        columns={columns()}
        rows={demoRows}
        pageSize={3}
        onRowClick={async () => {}}
      />
    </div>
  );
};

export default DataPage;