import { FC } from 'react';

import { CopyTypePath } from 'src/types/deeplinks';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import CopyUrlMenuItem from 'src/components/deeplinks/CopyUrlMenuItem';
import MoreMenu from 'src/components/deeplinks/MoreMenu';

import { newsRoutes } from '../routes';

export type NewsMenuProps = {
  id: number;
};

export const NewsMenu: FC<NewsMenuProps> = props => {
  const { id } = props;

  const { t } = useTranslation(['news', 'general']);

  const menuOptions = [
    {
      id: 'copy-url',
      enabled: true,
      option: (
        <CopyUrlMenuItem
          type={CopyTypePath.ARTICLE}
          route={newsRoutes.article.detail(id)}
        />
      ),
    },
  ];

  return (
    <MoreMenu
      id={`news-${id}`}
      label={t('news:news_menu')}
      withBackground
      menuOptions={menuOptions}
    />
  );
};

export default NewsMenu;
