import React from 'react';
import {Table, TableRow} from '@workday/canvas-kit-react/table';

const columns = ['ID', 'Name', 'Position', 'Location'];

const rows = [
  {
    data: [1, 'Aidan Brown', 'Product Manager', 'San Francisco, CA'],
    state: undefined,
  },
  {
    data: [2, 'Betty Chen', 'Product Designer', 'San Francisco, CA'],
    state: TableRow.State.Selected,
  },
  {
    data: [3, 'Helen Gonzalez', 'Application Developer', 'Portland, OR'],
    state: TableRow.State.Alert,
  },
  {
    data: [4, 'Timothy May', 'VP, Product Development', 'San Francisco, CA'],
    state: TableRow.State.InputAlert,
  },
  {
    data: [5, 'John Hours', 'Product Manager', 'New York, New York'],
    state: TableRow.State.Error,
  },
  {
    data: [6, 'Leslie Lang', 'Software Architect', 'New York, New York'],
    state: TableRow.State.InputError,
  },
];

export default () => {
  return (
    <Table>
      <thead>
        <TableRow header={true}>
          {columns.map((col, i) => (
            <th key={i}>{col}</th>
          ))}
        </TableRow>
      </thead>
      <tbody>
        {rows.map((row, i) => (
          <TableRow key={i} state={row.state}>
            {row.data.map((cell, j) => (
              <td key={j}>{cell}</td>
            ))}
          </TableRow>
        ))}
      </tbody>
    </Table>
  );
};
