import React from 'react';
import {CopyButton} from '@flareapp/ignition-ui';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';

type Props = {
    url: string;
    helpText: string;
    openText: string;
};

export default function CopyableUrl({url, openText, helpText}: Props) {
    return (
        <div>
            <p className="text-sm mb-1">{helpText}</p>
            <div className="flex gap-3">
                <a
                    href={url}
                    target="_blank"
                    className="underline ~text-violet-500 hover:~text-violet-600"
                >
                    <FontAwesomeIcon icon={faExternalLinkAlt} className="opacity-50 text-xs mr-1"/>
                    {openText}
                </a>
                <CopyButton alwaysVisible direction="left" value={url}/>
            </div>
        </div>
    )
}