import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { CardHeaderProps } from './types';
import { useTheme } from '../../theme/ThemeContext';

const CardHeader: React.FC<CardHeaderProps> = ({
  title,
  subtitle,
  left,
  right,
  style,
  titleStyle,
  subtitleStyle,
  titleColor,
  subtitleColor,
}) => {
  const {theme} = useTheme();

  return (
    <View style={[styles.header, style]}>
      {left && <View style={styles.left}>{left}</View>}
      
      <View style={[styles.headerTextContainer, !left ? { paddingLeft: 0 } : {}]}>
        {title && typeof title === 'string' ? (
          <Text style={[
            styles.title, 
            { color: titleColor || theme.text }, 
            titleStyle
          ]}>
            {title}
          </Text>
        ) : (
          title
        )}
        {subtitle && typeof subtitle === 'string' ? (
          <Text style={[
            styles.subtitle, 
            { color: subtitleColor || theme.helper }, 
            subtitleStyle
          ]}>
            {subtitle}
          </Text>
        ) : (
          subtitle
        )}
      </View>
      
      {right && <View style={styles.right}>{right}</View>}
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    padding: 16,
    paddingBottom: 0,
    // backgroundColor:"red",
    // alignItems: 'center'
  },
  left: {
    marginRight: 16,
  },
  headerTextContainer: {
    flex: 1,
  },
  right: {
    marginLeft: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
  },
  subtitle: {
    fontSize: 14,
    marginTop: 4,
  },
});

export default CardHeader;