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

/** Bouton « historique » réutilisable : accessible aussi pendant la visite et dans le rapport. */
const VisitHistoryButton = ({ listingId }: { listingId: string }) => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setVisible(true)}
        accessibilityLabel="Historique des visites"
      >
        <Feather name="clock" size={20} color={G.textSecondary} />
      </TouchableOpacity>

      <ListingHistory
        visible={visible}
        listingId={listingId}
        onClose={() => setVisible(false)}
      />
    </>
  );
};

export default memo(VisitHistoryButton);

const styles = StyleSheet.create({
  button: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
});