import React from 'react';
import { Plus } from 'lucide-react';
import { useFAB } from '@/contexts/FABContext';

export function FAB() {
  const { config } = useFAB();

  if (!config || config.visible === false) {
    return null;
  }

  return (
    <button
      onClick={config.onClick}
      className="fixed bottom-20 right-4 z-50 w-14 h-14 rounded-full bg-primary text-primary-foreground shadow-lg hover:shadow-2xl active:scale-95 transition-all duration-200 flex items-center justify-center md:hidden"
      aria-label={config.label}
    >
      {config.icon || <Plus className="w-6 h-6" />}
    </button>
  );
}