import * as React from 'react';
import { Flex } from 'rebass';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import CheckBox from '../../../../components/icons/check-box';
import { Tabs } from '../../../../components/Tabs';
import { DataPreview } from './DataPreview';
export const ImportSection = (props) => {
    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
        React.createElement(Tabs, { mb: 2 },
            React.createElement(Tabs.Tab, null, "Import Options"),
            React.createElement(Tabs.Content, null,
                React.createElement(FormLayout, null,
                    React.createElement(FormRow, { label: "Exclude Invalid Rows" },
                        React.createElement(CheckBox, null))))),
        React.createElement(Tabs, { flex: 1 },
            React.createElement(Tabs.Tab, null, "Preview"),
            React.createElement(Tabs.Content, null,
                React.createElement(DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));
};
