// Antd
import { Table } from 'antd';

// Types
import { FC } from 'react';
import { IncidentCategory } from 'myApi';
import { TypeRecommendationAndEffectsTableMessage } from '../types';

type TypeRecommendationAndEffectsTableProps = {
  data: IncidentCategory[];
  translations: TypeRecommendationAndEffectsTableMessage;
};

const RecommendationAndEffectsTable: FC<
  TypeRecommendationAndEffectsTableProps
> = ({ data, translations: { name, description } }) => {
  const columns = [
    {
      title: name,
      dataIndex: 'name',
      key: 'name',
      width: '30%',
    },
    {
      title: description,
      dataIndex: 'description',
      key: 'description',
      width: '70%',
    },
  ];
  return (
    <Table
      style={{ gridColumn: '1 / 4' }}
      columns={columns}
      dataSource={data || []}
      rowKey={(record) => record.id}
    />
  );
};

export default RecommendationAndEffectsTable;
