import React from 'react';
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { G } from '../../constants/visits.theme';

type VisitHeaderProps = {
  fadeAnim: Animated.Value;
  onPressHistory: () => void;
  onPressEdit?: () => void;
};

// Barre d'app façon Google : titre à gauche, actions à droite
const VisitHeader = ({ fadeAnim, onPressHistory, onPressEdit }: VisitHeaderProps) => (
  <Animated.View style={[styles.header, { opacity: fadeAnim }]}>
    <Text style={styles.headerTitle}>Détails de la visite</Text>

    <View style={styles.actions}>
      <TouchableOpacity style={styles.iconButton} onPress={onPressHistory} accessibilityLabel="Historique">
        <Feather name="clock" size={20} color={G.textSecondary} />
      </TouchableOpacity>

      {onPressEdit && (
        <TouchableOpacity style={styles.iconButton} onPress={onPressEdit} accessibilityLabel="Modifier">
          <Feather name="edit-3" size={20} color={G.textSecondary} />
        </TouchableOpacity>
      )}
    </View>
  </Animated.View>
);

export default VisitHeader;

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
  },
  headerTitle: { fontSize: 22, fontWeight: '400', color: G.text },
  actions: { flexDirection: 'row' },
  iconButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 4,
  },
});