import React from 'react'

export const Icon1 = ({ className, onClick }: { className?: string, onClick?: any }) => {
    return (
        <svg onClick={onClick} className={className + " hover:text-primary text-white hover:cursor-pointer iconStyle"} width="198" height="198" viewBox="0 0 198 198" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.399902" width="197.6" height="198" rx="98.8" fill="currentColor" />
            <rect className='iconStyleItem' x="0.899902" y="0.5" width="196.6" height="197" rx="98.3" stroke="currentColor" stroke-opacity="0.6" />
            <path className='iconStyleItem' d="M86.1895 77.2H105.325V122H95.2135V81.04L99.6295 85.456H86.1895V77.2Z" fill="currentColor" fillOpacity="0.87" />
        </svg>
    )
}
export const Icon2 = ({ className, onClick }: { className?: string, onClick?: any }) => {
    return (
        <svg onClick={onClick} className={className + " hover:text-primary text-white hover:cursor-pointer iconStyle"} width="199" height="198" viewBox="0 0 199 198" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.800049" width="197.6" height="198" rx="98.8" fill="currentColor" />
            <rect className='iconStyleItem' x="1.30005" y="0.5" width="196.6" height="197" rx="98.3" stroke="currentColor" stroke-opacity="0.6" />
            <path className='iconStyleItem' d="M99.5143 98.064C100.965 96.6133 102.138 95.1413 103.034 93.648C103.93 92.1547 104.378 90.832 104.378 89.68C104.378 88.1867 103.824 87.0347 102.714 86.224C101.648 85.4133 100.154 85.008 98.2343 85.008C96.3143 85.008 94.245 85.52 92.0263 86.544C89.8503 87.5253 87.7597 88.8693 85.7543 90.576L81.7863 83.28C84.5597 81.2747 87.4397 79.696 90.4263 78.544C93.4557 77.3493 96.549 76.752 99.7063 76.752C102.693 76.752 105.317 77.2213 107.578 78.16C109.882 79.0987 111.674 80.4427 112.954 82.192C114.277 83.8987 114.938 85.9253 114.938 88.272C114.938 90.6187 114.128 93.0507 112.506 95.568C110.928 98.0427 108.88 100.56 106.362 103.12L92.8583 116.944L91.5783 113.872H116.602V122H82.9383V115.28L99.5143 98.064Z" fill="currentColor" fillOpacity="0.87" />
        </svg>

    )
}
export const Icon3 = ({ className, onClick }: { className?: string, onClick?: any }) => {
    return (
        <svg onClick={onClick} className={className + " hover:text-primary text-white hover:cursor-pointer iconStyle"} width="198" height="198" viewBox="0 0 198 198" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.199951" width="197.6" height="198" rx="98.8" fill="currentColor" />
            <rect className='iconStyleItem' x="0.699951" y="0.5" width="196.6" height="197" rx="98.3" stroke="currentColor" stroke-opacity="0.6" />
            <path className='iconStyleItem' d="M102.787 95.76C106.627 96.1867 109.72 97.4667 112.067 99.6C114.456 101.691 115.651 104.485 115.651 107.984C115.651 110.8 114.904 113.317 113.411 115.536C111.96 117.712 109.891 119.419 107.203 120.656C104.515 121.851 101.336 122.448 97.667 122.448C94.467 122.448 91.331 121.979 88.259 121.04C85.2297 120.059 82.6483 118.779 80.515 117.2L84.419 109.968C86.2537 111.504 88.2377 112.677 90.371 113.488C92.5043 114.299 94.6803 114.704 96.899 114.704C98.7763 114.704 100.376 114.448 101.699 113.936C103.022 113.381 104.024 112.613 104.707 111.632C105.39 110.608 105.731 109.435 105.731 108.112C105.731 106.021 104.942 104.443 103.363 103.376C101.827 102.309 99.651 101.776 96.835 101.776H89.603V96.144L104.259 81.872L105.603 85.072H82.819L82.755 77.136H113.411V83.024L97.155 98.448L96.003 94.8L102.787 95.76Z" fill="currentColor" fillOpacity="0.87" />
        </svg>

    )
}
export const Icon4 = ({ className, onClick }: { className?: string, onClick?: any }) => {
    return (
        <svg onClick={onClick} className={className + " hover:text-primary text-white hover:cursor-pointer iconStyle"} width="199" height="198" viewBox="0 0 199 198" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.600098" width="197.6" height="198" rx="98.8" fill="currentColor" />
            <rect className='iconStyleItem' x="1.1001" y="0.5" width="196.6" height="197" rx="98.3" stroke="currentColor" stroke-opacity="0.6" />
            <path className='iconStyleItem' d="M80.3749 111.76V104.848L94.0709 77.2H103.671L88.8869 107.728L86.3909 103.824H116.663V111.76H80.3749ZM101.239 93.776H110.519V122H101.239V93.776Z" fill="currentColor" fillOpacity="0.87" />
        </svg>

    )
}
export const Icon5 = ({ className, onClick }: { className?: string, onClick?: any }) => {
    return (
        <svg onClick={onClick} className={className + " hover:text-primary text-white hover:cursor-pointer iconStyle"} width="198" height="198" viewBox="0 0 198 198" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="197.6" height="198" rx="98.8" fill="currentColor" />
            <rect className='iconStyleItem' x="0.5" y="0.5" width="196.6" height="197" rx="98.3" stroke="currentColor" stroke-opacity="0.6" />
            <path className='iconStyleItem' d="M94.2225 98L90.5105 93.584C91.4492 93.584 92.4732 93.584 93.5825 93.584C94.6919 93.5413 95.7585 93.52 96.7825 93.52C97.8065 93.52 98.6172 93.52 99.2146 93.52C102.713 93.52 105.743 94.096 108.303 95.248C110.863 96.4 112.847 98 114.255 100.048C115.663 102.096 116.367 104.443 116.367 107.088C116.367 110.203 115.62 112.912 114.127 115.216C112.633 117.477 110.543 119.248 107.855 120.528C105.209 121.808 102.073 122.448 98.4466 122.448C95.5452 122.448 92.5159 121.957 89.3585 120.976C86.2439 119.952 83.4919 118.651 81.1025 117.072L85.0065 109.712C86.8412 111.163 88.8039 112.336 90.8945 113.232C93.0279 114.085 95.1825 114.512 97.3585 114.512C99.8759 114.512 101.86 113.915 103.311 112.72C104.761 111.525 105.487 109.883 105.487 107.792C105.487 105.829 104.783 104.293 103.375 103.184C101.967 102.032 99.8332 101.456 96.9746 101.456C96.4626 101.456 95.6946 101.477 94.6705 101.52C93.6465 101.52 92.5159 101.541 91.2785 101.584C90.0412 101.627 88.8465 101.669 87.6945 101.712C86.5425 101.755 85.6039 101.819 84.8785 101.904V77.2H114.319V85.328H89.7425L94.2225 80.912V98Z" fill="currentColor" fillOpacity="0.87" />
        </svg>

    )
}
