import { Toast as TamaguiToast, useToastState } from '@tamagui/toast'
import { YStack } from 'tamagui'

export const Toast = () => {
  const currentToast = useToastState()

  if (!currentToast || currentToast.isHandledNatively) {
    return null
  }

  return (
    <TamaguiToast
      key={currentToast.id}
      duration={currentToast.duration}
      viewportName={currentToast.viewportName}
      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
      y={0}
      opacity={1}
      scale={1}
      animation="quick"
    >
      <YStack
        py="$1.5"
        px="$2"
      >
        <TamaguiToast.Title lh="$1">{currentToast.title}</TamaguiToast.Title>
        {!!currentToast.message && (
          <TamaguiToast.Description>{currentToast.message}</TamaguiToast.Description>
        )}
      </YStack>
    </TamaguiToast>
  )
}

export * from '@tamagui/toast'