import {View, Text, StyleSheet, StyleProp, ViewStyle} from 'react-native';
import Container from './Container';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

interface HeaderProps {
  title?: string;
  subTitle?: string;
  style?: StyleProp<ViewStyle>;
}
const Header = ({title, subTitle, style}: HeaderProps) => {
  return (
    <Container style={style}>
      <View style={styles.contentContainer}>
        <View style={styles.iconContainer}>
          <Icon name="bus" size={70} color={'white'} />
        </View>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>{title}</Text>
          {subTitle && <Text style={styles.subTitle}>{subTitle}</Text>}
        </View>
      </View>
    </Container>
  );
};

const defaultProps = {
  title: 'Sin información',
  subTitle: 'Sin información',
};

Header.defaultProps = defaultProps;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'orange',
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'stretch',
  },
  iconContainer: {
    justifyContent: 'center',
    alignContent: 'center',
    overflow: 'hidden',
  },
  titleContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  subTitle: {
    fontSize: 16,
    fontWeight: 'normal',
    color: 'white',
  },
});

export default Header;