import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { Pressable, StyleSheet, Text, View } from "react-native";

type ConversationHeaderProps = {
  totalLabel: string;
  onPressCreate?: () => void;
};

export function ConversationHeader({
  totalLabel,
  onPressCreate,
}: ConversationHeaderProps) {
  return (
    <View style={styles.container}>
      <View style={styles.sideSpacer} />
      <Text style={styles.title}>{`消息(${totalLabel})`}</Text>
      <Pressable
        accessibilityRole="button"
        onPress={onPressCreate}
        style={({ pressed }) => [styles.addButton, pressed && styles.addButtonPressed]}
      >
        <MaterialIcons color="#666666" name="add-circle-outline" size={30} />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    flexDirection: "row",
    height: 52,
    justifyContent: "space-between",
    paddingHorizontal: 20,
  },
  sideSpacer: {
    width: 36,
  },
  title: {
    color: "#242424",
    fontSize: 18,
    fontWeight: "700",
    letterSpacing: -0.2,
  },
  addButton: {
    alignItems: "center",
    borderCurve: "continuous",
    borderRadius: 18,
    height: 36,
    justifyContent: "center",
    width: 36,
  },
  addButtonPressed: {
    opacity: 0.7,
  },
});