import { Table, TableWrapper, Row, Rows, Col } from 'react-native-tabeller';
import { View, StyleSheet } from 'react-native';

export const ExampleThree = () => {
  const tableHead = ['', 'Head1', 'Head2', 'Head3'];
  const tableTitle = ['Title1', 'Title2', 'Title3'];
  const tableData = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['g', 'h', 'i'],
  ];

  const onCellPress = (data: any) => {
    console.log(`Cell pressed: ${data}`);
  };

  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderWidth: 1 }}>
        <Row data={tableHead} style={styles.head} textStyle={styles.headText} />
        <TableWrapper style={styles.wrapper}>
          <Col
            data={tableTitle}
            style={styles.title}
            heightArr={[28, 28, 28]}
            textStyle={styles.titleText}
          />
          <Rows
            data={tableData}
            flexArr={[1, 1, 1]}
            style={styles.row}
            textStyle={styles.text}
            onPress={onCellPress}
          />
        </TableWrapper>
      </Table>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: '#fff',
  },
  head: {
    height: 44,
    backgroundColor: '#C6F3E0',
  },
  text: {
    textAlign: 'center',
    padding: 5,
  },
  headText: {
    textAlign: 'center',
    fontWeight: 'bold',
  },
  row: {
    height: 40,
    backgroundColor: '#fff',
  },
  wrapper: {
    flexDirection: 'row',
  },
  title: {
    flex: 1,
    backgroundColor: '#C6F3E0',
  },
  titleText: {
    textAlign: 'left',
    marginLeft: 6,
    fontWeight: '600',
  },
});