import React, { FC } from 'react';
import { Alert, FlatList } from 'react-native';
import type { ITileMenuItemProps, ITileMenuProps } from './interface';
import ShaTileMenuItem from './ShaTileMenuItem';
import styles from './styles';

const ShaTileMenu: FC<ITileMenuProps> = (props) => {
  const childComponents = props.components;
  const numberOfColumns: number = props.numberOfColumns
    ? props.numberOfColumns
    : 3;

  const handleClick = (val: string) => Alert.alert(val);
  return (
    <FlatList
      style={styles.tileMenuContainer}
      numColumns={numberOfColumns}
      keyExtractor={(item: ITileMenuItemProps) => item.id}
      data={childComponents}
      renderItem={({ item }) => (
        <ShaTileMenuItem
          onPress={() => handleClick(item.title)}
          {...item}
          spacing={1 / numberOfColumns}
        />
      )}
    />
  );
};

export default ShaTileMenu;