import { Box } from './Box';
import { Button, ButtonProps } from './Button';

export interface FloatingActionProps extends Omit<ButtonProps, 'position'> {
  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
  title?: string;
}

export const FloatingAction = ({ 
  position = 'bottom-left', 
  title,
  ...props 
}: FloatingActionProps) => {
  const positionMap = {
    'bottom-left': { bottom: '1rem', left: '1rem' },
    'bottom-right': { bottom: '1rem', right: '1rem' },
    'top-left': { top: '1rem', left: '1rem' },
    'top-right': { top: '1rem', right: '1rem' },
  };

  return (
    <Box position="fixed" style={{ ...positionMap[position], zIndex: 100 }}>
      <Button rounded title={title} {...props} />
    </Box>
  );
};