import shortlinkLogo from '../assets/trx-shortlink-orange.png'
import '../App.css'
import { useParams } from 'react-router-dom';

const Copylink = () => {

        const { id } = useParams<{ id: string }>();

        return (
            <>
                <header>
                    <div className="nav">
                        <nav id="main-nav">
                            <ul id="centerlist">
                                <li id="home"> <a draggable="false" href="/home">Home</a> </li>


                            </ul>
                            <ul id="rightlist">
                                <li id="login"> <a draggable="false" href='/login'>Login</a></li>
                            </ul>
                        </nav>
                    </div>
                </header>
                <div id="logoname">
                    <a href="/home" >
                        <img src={shortlinkLogo} draggable="false" className="logo" alt="trx shortlink logo" />
                    </a>
                    <h1>trx shortlink</h1>
                </div>
                <div className="card">
                    <input className="input" id="shorturl" readOnly value={`http://localhost:3000/${id}`}></input>
                    <button id="button_copy" onClick={() => navigator.clipboard.writeText((document.getElementById("shorturl") as HTMLInputElement).value) && alert("The shortlink was copied!")}>
                        Copy!
                    </button>
                </div>
            </>
        )

};

export default Copylink;