// resources\assets\ts\ContactsPage\components\ContactsPageTitle.tsx
import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import type { MessageDescriptor } from '@lingui/core';

interface ContactsPageTitleProps {
  activeLabel: MessageDescriptor;
  activeIcon?: React.ReactNode;
  isDesktop: boolean;
  onMenuToggle: () => void;
}

const ContactsPageTitle: React.FC<ContactsPageTitleProps> = ({
  activeLabel,
  activeIcon,
  isDesktop,
  onMenuToggle,
}) => {
  const { i18n } = useLingui();
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
      {!isDesktop && (
        <IconButton onClick={onMenuToggle} edge="start">
          <MenuIcon />
        </IconButton>
      )}
      <Breadcrumbs aria-label="breadcrumb">
        <Typography variant="h2"><Trans>Addresses</Trans></Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          {/* {activeIcon} */}
          <Typography variant="h2">{i18n._(activeLabel)}</Typography>
        </Box>
      </Breadcrumbs>
    </Box>
  );
};

export default ContactsPageTitle;