import { Button, XStack, Text, View } from '@junwon/aesthetics'
import { Search } from '@tamagui/lucide-icons'

interface SearchBarButtonProps {
  onPress: () => void
  searchBarText: string
}

export const SearchBarButton = ({ onPress, searchBarText }: SearchBarButtonProps) => {
  return (
    <Button
      w="100%"
      h="$5"
      bc="$gray5"
      br={100}
      onPress={onPress}
      hoverStyle={{ bc: '$gray5', boc: 'transparent' }}
      pressStyle={{ bc: '$gray5' }}
    >
      <XStack w="100%">
        <Search
          color="$gray11"
          size="$1"
        />
        <Text
          pos="absolute"
          w="100%"
          ta="center"
          // @ts-expect-error
          color="$gray11"
        >
          {searchBarText}
        </Text>
      </XStack>
    </Button>
  )
}