import React from 'react';
import { View, StyleSheet, TextStyle, ViewStyle } from 'react-native';
import { useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLChatHeaderStyles = {
  headerContainer: ViewStyle;
  headerTitle: TextStyle;
};

export type LLChatHeaderProps = ComponentStyleProp<LLChatHeaderStyles> & {
  title: string;
};

export function LLChatHeader({ title, styles: stylesProp }: LLChatHeaderProps) {
  const headerStyles = useStyles({
    componentStylesFn: getChatHeaderStyles,
    stylesProp,
  });
  return (
    <View style={headerStyles.headerContainer}>
      <LLText style={headerStyles.headerTitle}>{title}</LLText>
    </View>
  );
}

const getChatHeaderStyles: LLComponentStyleFn<LLChatHeaderStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    headerContainer: {
      display: 'flex',
      flexDirection: 'row',
      padding: 12,
    },
    headerTitle: {
      alignSelf: 'center',
      fontSize: 16,
      textAlign: 'center',
      flex: 1,
      color: theme.text,
    },
  });