import React from 'react';
import { View } from 'react-native';
import ApplicationHeader from './ApplicationHeader';
import CategoryItem from './CategoryItem';

const Categories = () => {
  const { categoriesContainerStyle, categoriesListStyle } = styles;

  return (
    <View style={categoriesContainerStyle}>
      <ApplicationHeader headerText='MeMe' headerBackgroudColor='#6d6e71' />
      <View style={categoriesListStyle}>
        <CategoryItem categoryName='ANATOMIJA' categoryBackgroudColor='#f7bcbc' />
        <CategoryItem categoryName='LEKCIJE' categoryBackgroudColor='#f4d4d4' />
        <CategoryItem categoryName='UPITNIK' categoryBackgroudColor='#bcbec0' />
        <CategoryItem categoryName='REKLA KAZALA' categoryBackgroudColor='#e6e51a' />
      </View>
    </View>
  );
};

const styles = {
  categoriesListStyle: {
    flexDirection: 'column',
    flex: 1
  },

  categoriesContainerStyle: {
    flex: 1, flexDirection: 'column'
  }
};

export default Categories;