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

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

// a round icon button floating over the map
export const MapFab = ({
  label,
  icon,
  color = 'secondary',
  onPress,
}: {
  label: string
  icon: SymbolViewProps['name']
  color?: 'primary' | 'secondary'
  onPress: () => void
}) => {
  const t = useTheme()
  return (
    <Button
      label={label}
      color={color}
      size="large"
      shape="round"
      onPress={onPress}
    >
      <SymbolView
        name={icon}
        size={20}
        weight="medium"
        tintColor={
          color === 'primary'
            ? t.palette.white
            : t.palette.contrast_900
        }
      />
    </Button>
  )
}
