import React from 'react';

type DuaLogoProps = {
    color?: string
    colorWhite?:string
    colorGreen?:string
}

export const DuaLogoBeta = ({color='#white'}: DuaLogoProps) => {

    return (
        // beta
        <div className={'DuaLogoBeta'}>
            <svg xmlns="http://www.w3.org/2000/svg" width="61.332" height="56.309" viewBox="0 0 61.332 56.309">
                <g id="Group_23541" data-name="Group 23541" transform="translate(-26 -11.969)">
                    <g id="Group_20234" data-name="Group 20234" transform="translate(-274 -33.086)">
                        <g id="Group_20069" data-name="Group 20069" transform="translate(2997.52 -3078.405)">
                            <path id="Path_5056" data-name="Path 5056" d="M-2676.563,3476.843c-1.777-1.056-12.431-7.166-16.859-9.8a2.885,2.885,0,0,0-3.112.294c-1.233.986-.953,2.344-.967,3.605s0,11.423,0,11.423l-.006,3.512a5.186,5.186,0,0,0,1.416,3.469c1.64,1.548,17.248,9.98,20.545,11.723.278.147.61.044.61-.274v-13.732a.426.426,0,0,0-.221-.375l-9.837-5.6a2.048,2.048,0,0,0-2.438.186,2.79,2.79,0,0,0,.29,3.947c.743.4,6.374,3.666,7.57,4.307a.425.425,0,0,1,.222.376l0,3.269a.418.418,0,0,1-.618.372l-11.085-6.446a3.629,3.629,0,0,1-2-2.882c0-2.07.058-8.738.063-10.878a.417.417,0,0,1,.621-.369l12.839,7.468a.426.426,0,0,1,.214.371v.7a.426.426,0,0,0,.22.374l3.548,1.938a.418.418,0,0,0,.615-.375v-4.637C-2674.937,3478.119-2674.99,3477.777-2676.563,3476.843Z" transform="translate(0 -321.36)" fill="#fff"/>
                            <path id="Path_5057" data-name="Path 5057" d="M-2492.753,3360.014l16.717,9.929a1.573,1.573,0,0,1,.764,1.354v20.4a1.54,1.54,0,0,0,2.326,1.348l2.091-1.444a1.574,1.574,0,0,0,.755-1.348v-20.934a1.573,1.573,0,0,0-.752-1.346l-19-11.075a1.519,1.519,0,0,0-1.43-.08l-1.335.415A1.58,1.58,0,0,0-2492.753,3360.014Z" transform="translate(-196.105 -215.592)" fill="#fff"/>
                            <path id="Path_5058" data-name="Path 5058" d="M-2300.307,3259.861l16.717,9.929a1.574,1.574,0,0,1,.764,1.354v20.4a1.541,1.541,0,0,0,2.326,1.348l2.091-1.444a1.573,1.573,0,0,0,.755-1.349v-20.934a1.572,1.572,0,0,0-.752-1.346l-19-11.074a1.516,1.516,0,0,0-1.429-.079l-1.335.414A1.58,1.58,0,0,0-2300.307,3259.861Z" transform="translate(-381.1 -119.316)" fill="#fff"/>
                        </g>
                    </g>
                    <path id="Path_22407" data-name="Path 22407" d="M216.05,2.014h23.6a5.25,5.25,0,0,1,5.25,5.25v5.25a5.25,5.25,0,0,1-5.25,5.25h-23.6a5.25,5.25,0,0,1-5.25-5.258V7.264a5.25,5.25,0,0,1,5.25-5.25Z" transform="translate(-157.568 9.955)" fill="#ca2828"/>
                    <path id="Path_22408" data-name="Path 22408" d="M216,11.515h2.442a2.638,2.638,0,0,0,1.633-.47,1.563,1.563,0,0,0,.621-1.323,1.577,1.577,0,0,0-.28-.973,1.331,1.331,0,0,0-.707-.5V8.235a1.218,1.218,0,0,0,.583-.452,1.4,1.4,0,0,0,.238-.845,1.4,1.4,0,0,0-.59-1.244,2.862,2.862,0,0,0-1.622-.4H216Zm1.3-.926V8.721h1.115a.985.985,0,0,1,.744.25.942.942,0,0,1,.237.673.957.957,0,0,1-.237.682.98.98,0,0,1-.744.252Zm0-2.737V6.224h.995a1.031,1.031,0,0,1,.727.209.782.782,0,0,1,.222.6.8.8,0,0,1-.222.6,1.009,1.009,0,0,1-.721.215Zm4.085,3.663h4.232v-.991h-2.929V8.8h2.5V7.826h-2.5V6.293h2.885V5.3h-4.187Zm4.342-5.226h1.848v5.226h1.311V6.289h1.845V5.294h-5Zm4.307,5.222h1.211l1.61-4.4a2.561,2.561,0,0,0,.083-.269q.032-.135.054-.269h.039q.026.135.055.269a2.249,2.249,0,0,0,.081.269l1.6,4.4h1.409l-2.405-6.252h-1.374Zm1.346-1.37h3.352l-.3-.973h-2.747Z" transform="translate(-155.771 11.08)" fill="#fff"/>
                </g>
            </svg>
        </div>

    );
}

export const DuaLogo = ({color='#white'}: DuaLogoProps) => {

    return (
// launch
        <svg xmlns="http://www.w3.org/2000/svg" width="38.765" height="42.56" viewBox="0 0 38.765 42.56">
                <g id="Group_20234" data-name="Group 20234" transform="translate(-300 -58.805)">
                    <g id="Group_20069" data-name="Group 20069" transform="translate(2997.52 -3078.405)">
                        <path id="Path_5056" data-name="Path 5056" d="M-2676.563,3476.843c-1.777-1.056-12.431-7.166-16.859-9.8a2.885,2.885,0,0,0-3.112.294c-1.233.986-.953,2.344-.967,3.605s0,11.423,0,11.423l-.006,3.512a5.186,5.186,0,0,0,1.416,3.469c1.64,1.548,17.248,9.98,20.545,11.723.278.147.61.044.61-.274v-13.732a.426.426,0,0,0-.221-.375l-9.837-5.6a2.048,2.048,0,0,0-2.438.186,2.79,2.79,0,0,0,.29,3.947c.743.4,6.374,3.666,7.57,4.307a.425.425,0,0,1,.222.376l0,3.269a.418.418,0,0,1-.618.372l-11.085-6.446a3.629,3.629,0,0,1-2-2.882c0-2.07.058-8.738.063-10.878a.417.417,0,0,1,.621-.369l12.839,7.468a.426.426,0,0,1,.214.371v.7a.426.426,0,0,0,.22.374l3.548,1.938a.418.418,0,0,0,.615-.375v-4.637C-2674.937,3478.119-2674.99,3477.777-2676.563,3476.843Z" transform="translate(0 -321.36)" fill="#fff"/>
                        <path id="Path_5057" data-name="Path 5057" d="M-2492.753,3360.014l16.717,9.929a1.573,1.573,0,0,1,.764,1.354v20.4a1.54,1.54,0,0,0,2.326,1.348l2.091-1.444a1.574,1.574,0,0,0,.755-1.348v-20.934a1.573,1.573,0,0,0-.752-1.346l-19-11.075a1.519,1.519,0,0,0-1.43-.08l-1.335.415A1.58,1.58,0,0,0-2492.753,3360.014Z" transform="translate(-196.105 -215.592)" fill="#fff"/>
                        <path id="Path_5058" data-name="Path 5058" d="M-2300.307,3259.861l16.717,9.929a1.574,1.574,0,0,1,.764,1.354v20.4a1.541,1.541,0,0,0,2.326,1.348l2.091-1.444a1.573,1.573,0,0,0,.755-1.349v-20.934a1.572,1.572,0,0,0-.752-1.346l-19-11.074a1.516,1.516,0,0,0-1.429-.079l-1.335.414A1.58,1.58,0,0,0-2300.307,3259.861Z" transform="translate(-381.1 -119.316)" fill="#fff"/>
                    </g>
                </g>
            </svg>
    );
}

export const DuaLogoLive = ({ colorWhite = '#ffffff',colorGreen = '#2bc48a' }) => {
    return (
                <div className={'DuaLogoLive'}>
            <svg
                id="Layer_2"
                data-name="Layer 2"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 56.1 54.3"
                width="56.1" height="54.3"
            >
                <defs>
                    <style>
                        {`
                            .cls-1 {
                                fill: ${colorGreen};
                            }
                            .cls-1, .cls-2, .cls-3 {
                                stroke-width: 0px;
                            }
                            .cls-2 {
                                fill: ${colorWhite};
                            }
                            .cls-3 {
                                fill: #fff;
                            }
                        `}
                    </style>
                </defs>
                <g id="Layer_1-2" data-name="Layer 1">
                    <g>
                        <path
                            id="Path_5056"
                            data-name="Path 5056"
                            className="cls-2"
                            d="M20.87,30.13c-1.77-1.05-12.38-7.13-16.79-9.76-1-.52-2.21-.4-3.1.29-1.23.98-.95,2.33-.96,3.59S.02,35.62.02,35.62v3.49c.02,1.29.52,2.52,1.4,3.45,1.63,1.54,17.17,9.94,20.46,11.67.28.15.61.04.61-.27v-13.67c0-.16-.08-.3-.22-.37l-9.79-5.57c-.76-.48-1.75-.41-2.43.18-1.01,1.16-.89,2.91.27,3.91,0,0,.01.01.02.02.74.4,6.35,3.65,7.54,4.29.14.07.22.22.22.37v3.25c0,.23-.17.42-.4.42-.08,0-.15-.02-.22-.05l-11.04-6.42c-1.11-.55-1.86-1.63-1.99-2.87,0-2.06.06-8.7.06-10.83,0-.23.17-.42.4-.42.08,0,.15.02.22.05l12.78,7.44c.13.08.21.22.21.37v.7c0,.15.08.3.22.37l3.53,1.93c.2.11.45.05.56-.15.04-.07.06-.14.05-.22v-4.62c0-.67-.05-1.01-1.62-1.95Z"
                        />
                        <path
                            id="Path_5057"
                            data-name="Path 5057"
                            className="cls-2"
                            d="M8.62,19.11l16.64,9.89c.47.28.76.8.76,1.35v20.31c-.01.85.66,1.54,1.51,1.56.28,0,.56-.07.8-.21l2.08-1.44c.47-.28.75-.79.75-1.34v-20.84c0-.55-.28-1.05-.75-1.34l-18.92-11.03c-.43-.26-.97-.29-1.42-.08l-1.33.41c-.78.38-1.11,1.32-.74,2.1.13.28.34.51.6.66Z"
                        />
                        <path
                            id="Path_5058"
                            data-name="Path 5058"
                            className="cls-2"
                            d="M16.04,15.25l16.64,9.89c.47.28.76.8.76,1.35v20.31c-.01.85.66,1.54,1.51,1.56.28,0,.56-.07.81-.21l2.08-1.44c.47-.29.75-.79.75-1.34v-20.84c0-.55-.28-1.05-.75-1.34l-18.92-11.03c-.43-.26-.97-.29-1.42-.08l-1.33.41c-.78.38-1.11,1.32-.74,2.1.13.28.34.51.6.66Z"
                        />
                        <g>
                            <path
                                className="cls-1"
                                d="M53.22,0h-16.03c-.47,0-1.67,1.5-1.67,3.36l-2.85,5.67c0,1.85.93,3.36,2.52,3.36h18.04c1.59,0,2.88-1.5,2.88-3.36V3.36c0-1.85-1.29-3.36-2.88-3.36Z"
                            />
                            <path
                                className="cls-1"
                                d="M35.54,12.38h16.03c.47,0,1.67-1.5,1.67-3.36l2.85-5.67c0-1.85-.93-3.36-2.52-3.36h-18.04c-1.59,0-2.88,1.5-2.88,3.36v5.67c0,1.85,1.29,3.36,2.88,3.36Z"
                            />
                        </g>
                        <g>
                            <path className="cls-3" d="M37.1,8.88V3.54h1.03v4.43h2.57v.91h-3.6Z"/>
                            <path className="cls-3" d="M41.27,8.88V3.5h1.03v5.38h-1.03Z"/>
                            <path className="cls-3" d="M44.45,8.88l-1.83-5.38h1.12l1.3,3.98,1.25-3.98h1.1l-1.83,5.38h-1.1Z"/>
                            <path className="cls-3" d="M47.77,8.88V3.5h3.79v.91h-2.76v1.19h2.57v.91h-2.57v1.46h2.86v.91h-3.89Z"/>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
    );
};
