import React from 'react';
import { SpeedDial, SpeedDialAction } from '@mui/material';
import { 
  Dashboard as DashboardIcon,
  Search as TestIcon,
  Settings as ConfigIcon,
  ListAlt as OverviewIcon,
} from '@mui/icons-material';
import { useTranslation } from 'react-i18next';

interface FloatingActionButtonsProps {
  onTestClick: () => void;
  onConfigClick: () => void;
  onOverviewClick: () => void;
}

const FloatingActionButtons: React.FC<FloatingActionButtonsProps> = ({
  onTestClick,
  onConfigClick,
  onOverviewClick,
}) => {
  const { t } = useTranslation();
  
  const actions = [
    { 
      icon: <TestIcon />, 
      name: t('knowledge.retrievalTest'), 
      onClick: onTestClick,
    },
    { 
      icon: <ConfigIcon />, 
      name: t('knowledge.configSettings'), 
      onClick: onConfigClick,
    },
    // {
    //   icon: <OverviewIcon />,
    //   name: t('knowledgeDetails.overview'),
    //   onClick: onOverviewClick,
    // },
  ];

  return (
    <SpeedDial
      ariaLabel={t('knowledge.knowledgeBaseActions')}
      sx={{ 
        position: 'fixed', 
        bottom: 128,
        right: 64,
        '& .MuiSpeedDial-fab': {
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        },
      }}
      icon={<DashboardIcon />}
    >
      {actions.map((action) => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          slotProps={{
            tooltip: {
              title: action.name,
              sx: {
                bgcolor: 'primary.main',
                color: 'white',
                ":hover": {
                  bgcolor: 'primary.dark',
                },
              },
            },
          }}
          onClick={action.onClick}
        />
      ))}
    </SpeedDial>
  );
};

export default FloatingActionButtons;