import { Breadcrumbs, Button, Box, Typography, IconButton } from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings';
import { useTranslation } from 'react-i18next';
import { Link as RouterLink } from 'react-router-dom';

export interface AgentTopbarProps {
  title?: string;
  id?: string;
  onRefresh?: () => void;
  subtitle?: string;
  actionsRight?: React.ReactNode;
  onOpenVersions?: () => void;
  onOpenSettings?: () => void;
}

export default function AgentTopbar({ title, onRefresh, subtitle, actionsRight, onOpenVersions, onOpenSettings }: AgentTopbarProps) {
  const { t } = useTranslation();
  return (
    <Box sx={{
      p: 2,
      backgroundColor: 'background.paper',
      borderBottom: '1px solid',
      borderColor: 'divider',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    }}>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'left', gap: 1 }}>
        <Breadcrumbs aria-label="breadcrumb">
          <RouterLink to="/agents" style={{ textDecoration: 'none' }}>{t('header.agent')}</RouterLink>
          <Typography color="text.primary">{title}</Typography>
        </Breadcrumbs>
        {subtitle && (
          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>{subtitle}</Typography>
        )}
      </Box>
      <Box display="flex" gap={1}>
        {actionsRight}
        <Button variant="contained" onClick={onOpenVersions}>{t('agent.versions')}</Button>
        <Button variant="outlined" onClick={onRefresh}>{t('common.refresh')}</Button>
        <IconButton aria-label="setting" onClick={onOpenSettings}>
          <SettingsIcon />
        </IconButton>
      </Box>
    </Box>
  );
}