import React from 'react';
import { Button } from '@tamagui/button';
import { Camera } from 'lucide-react';
import { useGuestThemeVariant } from '../lib/guestTheme';

type FloatingActionButtonProps = {
  onPress: () => void;
  onLongPress?: () => void;
};

export default function FloatingActionButton({ onPress, onLongPress }: FloatingActionButtonProps) {
  const longPressTriggered = React.useRef(false);
  const { isDark } = useGuestThemeVariant();

  return (
    <Button
      onPress={() => {
        if (longPressTriggered.current) {
          longPressTriggered.current = false;
          return;
        }
        onPress();
      }}
      onPressIn={() => {
        longPressTriggered.current = false;
      }}
      onLongPress={() => {
        if (!onLongPress) {
          return;
        }
        longPressTriggered.current = true;
        onLongPress();
      }}
      position="fixed"
      bottom={20}
      left="50%"
      zIndex={1100}
      width={68}
      height={68}
      borderRadius={999}
      backgroundColor="$primary"
      borderWidth={0}
      elevation={4}
      shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
      shadowOpacity={0.5}
      shadowRadius={22}
      shadowOffset={{ width: 0, height: 10 }}
      style={{
        transform: 'translateX(-50%)',
        boxShadow: isDark
          ? '0 20px 40px rgba(255, 79, 216, 0.38), 0 0 0 8px rgba(255, 79, 216, 0.16)'
          : '0 18px 32px rgba(15, 23, 42, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.7)',
      }}
    >
      <Camera size={26} color="white" />
    </Button>
  );
}