/* eslint-disable react/jsx-no-target-blank */
import React, { FC } from 'react';
import { Button, CloseGlyph, ExternalLinkIcon } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { CLASSNAME, DATASOURCES_PAGE_URL } from './constants';

export interface Props {
    onClose: () => void;
}

export const CLASSNAME_HEADER = `${CLASSNAME}-header`;
export const CLASSNAME_HEADER_TITLE = `${CLASSNAME}-header-title`;
export const CLASSNAME_HEADER_LINK = `${CLASSNAME}-header-link`;
export const CLASSNAME_HEADER_CLOSE = `${CLASSNAME}-header-close`;

export const TERM_POPOVER_TITLE = 'sources.modal.title';

const PopoverHeader: FC<Props> = ({ onClose }) => (
    <div className={CLASSNAME_HEADER}>
        <a
            className={CLASSNAME_HEADER_LINK}
            href={DATASOURCES_PAGE_URL}
            target="_blank"
        >
            <h4 className={CLASSNAME_HEADER_TITLE}>
                {formatMessage(TERM_POPOVER_TITLE)}
            </h4>
            <ExternalLinkIcon />
        </a>
        <Button
            className={CLASSNAME_HEADER_CLOSE}
            onClick={onClose}
            variant="link"
            size="sm"
        >
            <CloseGlyph />
        </Button>
    </div>
);

export default PopoverHeader;