import {SymbolView, type SFSymbol} from 'expo-symbols'

import {Button} from '@/components/ui/button'
import {useTheme} from '@/sprinkles'

// the ghost icon button header slots share (headerLeft/headerRight)
export function HeaderIconButton({
  icon,
  label,
  onPress,
}: {
  icon: SFSymbol
  label: string
  onPress: () => void
}) {
  const t = useTheme()
  return (
    <Button
      label={label}
      variant="ghost"
      color="primary"
      hitSlop={12}
      style={{paddingHorizontal: 0, paddingVertical: 0}}
      onPress={onPress}
    >
      <SymbolView
        name={icon}
        size={18}
        weight="medium"
        tintColor={t.palette.primary_500}
      />
    </Button>
  )
}
