import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useContext } from 'react'
import { List } from 'react-native-paper'
import Header from '../../atoms/Header/Header'
import { horizontalScale, moderateScale } from '../../../constants/metrics'
import colors from '../../../constants/colors'
import fonts from '../../../constants/fonts'
import { ThemeContext } from '../../../context/theme.context'


const SectionHeader = ({ label, onPress, isButtonShown }) => {
  const theme = useContext(ThemeContext)
  const currentTheme = theme.state.theme
  const styles = StyleSheet.create({
    recentHeader: {
      paddingHorizontal: horizontalScale(16),
      // backgroundColor: colors().dominant,
      elevation: 0
    },
    recentHeaderText: {
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(16),
      color: colors().recessive
    },
    seeAllText: {
      fontFamily: fonts.type.semibold,
      color: colors().primaryColor,
      paddingRight: horizontalScale(16),
      alignSelf: 'stretch'

    },
    recentHeaderIcon: {

    },
    recentCardContainer: {
      flexDirection: 'column',
      paddingHorizontal: horizontalScale(16),
      overflow: 'hidden'
    },
  })
  return (
    <Header headerStyle={styles.recentHeader}
      backIconTextComponent={<Text style={styles.recentHeaderText}>{label}</Text>}
    >

      {isButtonShown ?? <TouchableOpacity onPress={onPress} style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
        <Text style={styles.seeAllText}>See All</Text>
        <List.Icon style={styles.recentHeaderIcon} icon="arrow-right" color={colors().primaryColor} />
      </TouchableOpacity>}
    </Header>
  )
}

export default SectionHeader

