import { Pressable } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../theme";

interface FabProps {
  onPress: () => void;
  icon?: string;
  accessibilityLabel: string;
}

export function Fab({ onPress, icon = "add", accessibilityLabel }: FabProps) {
  const theme = useTheme();

  return (
    <Pressable
      accessible
      accessibilityLabel={accessibilityLabel}
      accessibilityRole="button"
      onPress={onPress}
      style={({ pressed }) => [
        {
          position: "absolute",
          bottom: 24,
          right: 24,
          backgroundColor: theme.colors.primary,
          width: 58,
          height: 58,
          borderRadius: 29,
          alignItems: "center",
          justifyContent: "center",
          ...theme.shadows.lg,
        },
        pressed && { opacity: 0.82, transform: [{ scale: 0.96 }] },
      ]}
    >
      <Ionicons name={icon as any} size={28} color={theme.colors.textInverse} />
    </Pressable>
  );
}