import { useState } from 'react'
import { StyleSheet, View } from 'react-native'
import { Banner } from '../../../components/display/banner'
import { IconButton } from '../../../components/display/icon_button'
import { Text } from '../../../components/display/text'

interface ResultsHeadingProps {
  description: string | null
}

export function ResultsHeading({ description }: ResultsHeadingProps) {
  const [descriptionVisible, setDescriptionVisible] = useState(false)

  return (
    <View style={styles.container}>
      <View style={styles.headingRow}>
        <Text style={styles.heading}>Results</Text>
        {description && (
          <IconButton
            name="general.outlinedInfoCircle"
            size="xs"
            accessibilityLabel="Who appears in results"
            accessibilityState={{ expanded: descriptionVisible }}
            onPress={() => setDescriptionVisible(visible => !visible)}
          />
        )}
      </View>
      {description && descriptionVisible && (
        <Banner appearance="neutral" description={description} />
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 8,
    gap: 8,
  },
  headingRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  heading: {
    fontWeight: '600',
  },
})