1  import type React from 'react';
 2  import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 3  import { Ionicons } from '@expo/vector-icons';
 4  
 5  interface LastReadChapterBarProps {
 6    lastReadChapter: string | null;
 7    onPress: () => void;
 8    colors: any;
 9    readChapters: string[];
10  }
11  
12  const LastReadChapterBar: React.FC<LastReadChapterBarProps> = ({
13    lastReadChapter,
14    onPress,
15    colors,
16  }) => {
17    const isStartReading = !lastReadChapter || lastReadChapter === 'Not started';
18  
19    return (
20      <TouchableOpacity
21        onPress={onPress}
22        style={[
23          styles.container,
24          {
25            backgroundColor: colors.primary + '08',
26            borderColor: colors.primary + '10',
27          },
28        ]}
29        testID="last-read-chapter-bar"
30      >
31        <View style={[styles.content]}>
32          <Ionicons
33            name={isStartReading ? 'play-circle-outline' : 'bookmark-outline'}
34            size={20}
35            color={colors.primary}
36            style={styles.icon}
37          />
38          <Text style={[styles.text, { color: colors.text }]}>
39            {isStartReading ? (
40              'Start reading'
41            ) : (
42              <>
43                Continue from{' '}
44                <Text style={[styles.chapterText, { color: colors.primary }]}>
45                  {lastReadChapter}
46                </Text>
47              </>
48            )}
49          </Text>
50        </View>
51        <Ionicons name="chevron-forward" size={18} color={colors.text + '40'} />
52      </TouchableOpacity>
53    );
54  };
55  
56  const styles = StyleSheet.create({
57    container: {
58      flexDirection: 'row',
59      alignItems: 'center',
60      justifyContent: 'space-between',
61      borderRadius: 12,
62      marginTop: 20,
63      marginBottom: -20,
64      padding: 14,
65      borderWidth: 1,
66    },
67    content: {
68      flexDirection: 'row',
69      alignItems: 'center',
70      flex: 1,
71    },
72    icon: {
73      marginRight: 12,
74    },
75    text: {
76      fontSize: 15,
77      fontWeight: '400',
78      letterSpacing: 0.1,
79    },
80    chapterText: {
81      fontWeight: '600',
82    },
83  });
84  
85  export default LastReadChapterBar;