import { styled, Text } from 'tamagui';
import { LinearGradient } from 'tamagui/linear-gradient';
import { Pressable } from 'react-native';
import { useState, useCallback, useMemo } from 'react';

const ButtonTamagui = () => {
  const [isPressed, setIsPressed] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  // Determine current colors based on states
  const currentColors = useMemo(() => {
    if (isPressed) {
      return ['#275d77', '#274e63'];
    } else if (isHovered) {
      return ['#287192', '#275d77'];
    } else {
      return ['#3199bd', '#287192'];
    }
  }, [isPressed, isHovered]);

  // Optimized handlers with useCallback
  const handlePressIn = useCallback(() => setIsPressed(true), []);
  const handlePressOut = useCallback(() => setIsPressed(false), []);
  const handleHoverIn = useCallback(() => setIsHovered(true), []);
  const handleHoverOut = useCallback(() => setIsHovered(false), []);
  const handlePress = useCallback(() => console.log('Button pressed!'), []);

  return (
    <Pressable
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      onHoverIn={handleHoverIn}
      onHoverOut={handleHoverOut}
      onPress={handlePress}
    >
      <LinearGradientButton colors={currentColors}>
        <TextButton>Enter</TextButton>
      </LinearGradientButton>
    </Pressable>
  );
};

const LinearGradientButton = styled(LinearGradient, {
  name: 'GradientBorder',
  style: {
    padding: 8,
    alignItems: 'center',
    borderRadius: 8,
    cursor: 'pointer', // Validate if this property is necessary for each platform
  },
});

const TextButton = styled(Text, {
  style: { fontSize: 16, zIndex: 1 },
  color: 'white',
});

export default ButtonTamagui;