import React from "react";
import { BorderLine } from "./borderLine";

type TProps = {

}

export const ShareContainer:React.FC<TProps> = React.memo((props) => {
    return <div className="share-container">
        <div className="share-container-item">
            <span className="share-container-item-title">Код подключения</span>
            <div className="share-container-item-buttons">
                <input className="share-container-item-input code" value={'123 456'} readOnly></input>
                <div className="share-container-item-copy-code-button-container">
                    <span className="share-container-item-copy-code-button-icon"></span>
                    <span className="share-container-item-copy-code-button-text">Скопировать</span>
                </div>
            </div>
        </div>
        <BorderLine width="80%"/>
        <div className="share-container-item">
            <span className="share-container-item-title">Ссылка для подключения</span>
            <div className="share-container-item-buttons">
                <input 
                    className="share-container-item-input href" 
                    value={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}
                    readOnly
                ></input>
                <button className="share-container-item-copy-href-button"></button>
            </div>
        </div>
    </div>    
})