import React from 'react';
import { Pressable, StyleSheet, Platform } from 'react-native';
import { Icon } from './Icon';
import { useThemeColors } from '~/utils/themeUtils';

interface FloatingActionButtonProps {
  icon: string;
  iconLibrary?: 'Ionicons' | 'FontAwesome' | 'MaterialIcons' | 'Feather';
  onPress: () => void;
  size?: number;
}

export const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
  icon,
  iconLibrary = 'Ionicons',
  onPress,
  size = 56,
}) => {
  const colors = useThemeColors();
  const iconSize = size === 56 ? 24 : size === 48 ? 20 : 28;

  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.container,
        {
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: colors.primary,
          opacity: pressed ? 0.8 : 1,
          transform: [{ scale: pressed ? 0.95 : 1 }],
        },
      ]}>
      <Icon name={icon} size={iconSize} color={colors.primaryForeground} library={iconLibrary} />
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
    ...Platform.select({
      web: {
        cursor: 'pointer',
      },
    }),
  },
});