import type { FC } from 'react';
import React from 'react';
import { AppIcon } from '@theorchard/suite-icons';
import { useIdentity } from '@theorchard/suite-identity';
import Segment from '../../segment';
import type { Application } from '@theorchard/suite-identity';

const CLASSNAME = 'AppGridButton';
const CLASSNAME_TEXT = `${CLASSNAME}-text`;
const TEST_ID = CLASSNAME;

interface Props {
    app: Application;
}

export const AppGridButton: FC<Props> = ({ app }) => {
    const { impersonatedBy, id } = useIdentity();
    const params = impersonatedBy?.id ? `?impersonating=${id}` : '';

    return (
        <a
            className={CLASSNAME}
            data-testid={TEST_ID}
            href={`${app.url}${params}`}
            target="_blank"
            rel="noreferrer"
            onClick={async () => await Segment.trackEvent(`Click - AppSwitcher - ${app.name}`)}
        >
            <AppIcon app={app.id} />
            <span className={CLASSNAME_TEXT}>{app.name}</span>
        </a>
    );
};