import {
  View,
  Text,
  StyleSheet,
  StyleProp,
  ViewStyle,
  Image,
} from 'react-native';
import Container from './Container';

interface HeaderProps {
  title?: string;
  subTitle?: string;
  style?: StyleProp<ViewStyle>;
  image?: string;
}
const Header = ({title, subTitle, style, image}: HeaderProps) => {
  return (
    <Container style={style}>
      <View style={styles.contentContainer}>
        <View style={styles.iconContainer}>
          <Image
            source={{
              uri: 'https://cdn-icons-png.flaticon.com/512/8371/8371047.png',
            }}
            style={styles.icon}
          />
        </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',
  },
  icon: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  iconContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 8,
  },
  titleContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  subTitle: {
    fontSize: 16,
    fontWeight: 'normal',
    color: 'white',
  },
});

export default Header;