import React from 'react';
import { Data, DataTable, Pagination } from 'grommet';

const data = [
  {
    name: 'aa',
    enabled: true,
    rating: 2.3,
    sub: { note: 'ZZ' },
    tags: ['qa', 'staging', 'prod'],
  },
  {
    name: 'bb',
    enabled: false,
    rating: 4.3,
    sub: { note: 'YY' },
    tags: ['qa', 'staging'],
  },
  { name: 'cc', sub: {}, tags: ['qa'] },
  { name: 'dd' },
];

const properties = {
  name: { label: 'Name' },
};

const view = {
  step: 2,
  page: 1,
  search: '',
};

const columns = [
  { property: 'name', header: 'Name', size: 'small', primary: true },
];

// eslint-disable-next-line arrow-body-style
export const TEMP = () => {
  return (
    <Data
      data={data}
      properties={properties}
      view={view}
      toolbar
    >
      <DataTable columns={columns} />
      <Pagination />
    </Data>
  );
};

TEMP.storyName = 'TEMP';

TEMP.args = {
  full: true,
};

export default {
  title: 'Data/Data/TEMP',
};