import { Box, HTMLChakraProps, useColorModeValue } from "@chakra-ui/react"
import Link from "next/link"
import React from "react"

export const Logo = (props) => {
    const fill = useColorModeValue("#151618", "#fff")

    return (
        <Link href="/">
            <Box cursor="pointer">
                <svg viewBox="0 0 114 20" width={props.width} xmlns="http://www.w3.org/2000/svg">
                    \<g fill={fill} fillRule="evenodd" id="svg_1"><g fillRule="nonzero" id="svg_2"><path d="M30.6276,9.99306L26.69038,6.0476L28.65797,2.10352L35.05517,8.51411C35.87026,9.33091 35.87026,10.65521 35.05517,11.472L27.18143,19.36223C26.36633,20.17903 25.04481,20.17903 24.22971,19.36223C23.41462,18.54543 23.41462,17.22114 24.22971,16.40434L30.6276,9.99306z" opacity=".56" id="svg_3"></path><path d="M24.23118,0.61615C25.04627,-0.20065 26.36814,-0.20031 27.18323,0.61649L28.65943,2.09578L11.43678,19.3545C10.62168,20.1713 9.29981,20.17096 8.48472,19.35416L7.00852,17.87487L24.23118,0.61615zM16.84984,6.04055L13.89745,8.99913L9.96023,5.05368L5.03889,9.98533L8.9761,13.93078L7.00852,17.87487L0.61132,11.46427C-0.20377,10.64747 -0.20377,9.32318 0.61132,8.50638L8.48472,0.61649C9.29981,-0.20031 10.62168,-0.20065 11.43678,0.61615L16.84984,6.04055z" id="svg_4"></path></g><path d="M69.9619,17.85659 L69.9619,16.278309999999998 L68.34275,16.278309999999998 L68.34275,17.85659 L69.9619,17.85659 zM74.80461,17.95985 C75.58965,17.95985 76.25448,17.76318 76.7991,17.36983 C77.34373,16.97649 77.72398,16.450400000000002 77.93987,15.791549999999999 L77.93987,17.85659 L79.27934,17.85659 L79.27934,6.9413599999999995 L77.93987,6.9413599999999995 L77.93987,11.82371 C77.72398,11.16487 77.34373,10.638770000000001 76.7991,10.24543 S75.58965,9.65542 74.80461,9.65542 C74.08826,9.65542 73.45042,9.82259 72.89108,10.156930000000001 S71.8926,10.97311 71.57368,11.60246 C71.25476,12.23181 71.0953,12.96932 71.0953,13.815010000000001 S71.25476,15.39575 71.57368,16.02018 C71.8926,16.64461 72.33174,17.12399 72.89108,17.45834 S74.08826,17.95985 74.80461,17.95985 zM75.18732,16.77982 C74.36303,16.77982 73.7031,16.51677 73.20755,15.99068 C72.71199,15.46458 72.46421,14.73936 72.46421,13.815010000000001 S72.71199,12.16543 73.20755,11.63933 C73.7031,11.11324 74.36303,10.85019 75.18732,10.85019 C75.71722,10.85019 76.1907,10.97065 76.60775,11.21157 C77.0248,11.4525 77.35109,11.79913 77.5866,12.25147 C77.82211,12.70382 77.93987,13.22499 77.93987,13.815010000000001 S77.82211,14.92374 77.5866,15.37117 C77.35109,15.81859 77.0248,16.165219999999998 76.60775,16.41106 C76.1907,16.6569 75.71722,16.77982 75.18732,16.77982 zM84.99051,17.95985 C85.66761,17.95985 86.27601,17.836930000000002 86.81573,17.59109 C87.35544,17.34525 87.79457,17.00108 88.13312,16.55857 S88.69001,15.61455 88.78814,15.05403 L87.36035,15.05403 C87.26222,15.60471 86.99481,16.04476 86.55814,16.37419 C86.12146,16.703609999999998 85.57929,16.86832 84.93163,16.86832 C84.21528,16.86832 83.60933,16.637230000000002 83.11377,16.175060000000002 S82.35572,15.01962 82.32628,14.09526 L88.78814,14.09526 C88.82739,13.88876 88.84702,13.64292 88.84702,13.35775 C88.84702,12.67923 88.69246,12.05972 88.38335,11.49921 C88.07424,10.93869 87.62775,10.49127 87.04388,10.156930000000001 C86.46001,9.82259 85.77555,9.65542 84.99051,9.65542 C84.21528,9.65542 83.52837,9.82259 82.92978,10.156930000000001 S81.86261,10.97311 81.52407,11.60246 C81.18552,12.23181 81.01624,12.96932 81.01624,13.815010000000001 S81.18552,15.39575 81.52407,16.02018 C81.86261,16.64461 82.33118,17.12399 82.92978,17.45834 S84.21528,17.95985 84.99051,17.95985 zM87.49282,13.44625 L82.32628,13.44625 C82.36553,12.56123 82.63539,11.89009 83.13585,11.43283 C83.63631,10.97557 84.25453,10.74694 84.99051,10.74694 C85.45172,10.74694 85.87859,10.84528 86.27111,11.04195 C86.66363,11.23862 86.97274,11.53854 87.19843,11.94172 C87.42413,12.34489 87.52226,12.8464 87.49282,13.44625 zM94.51403,17.85659 L97.67872,9.75867 L96.23621,9.75867 L93.73389,16.42581 L91.20214,9.75867 L89.75963,9.75867 L92.92432,17.85659 L94.51403,17.85659 z" fillRule="nonzero" opacity=".56" id="svg_6" strokeDasharray="none"></path><text fill={fill} stroke="null" strokeWidth="0" strokeOpacity="null" fillOpacity="null" x="39.5" y="18.453125" id="svg_7" fontSize="25" fontFamily="sans-serif" textAnchor="start" strokeDasharray="none">im</text></g>
                </svg>
            </Box>

        </Link>
    )
}

export const LogoIcon = (props: HTMLChakraProps<"svg">) => {
    const fill = useColorModeValue("#151618", "#fff")
    return (
        <Link href="/">
            <Box cursor="pointer">
                <svg height="20" viewBox="0 0 114 20" width="114" xmlns="http://www.w3.org/2000/svg">
                    \<g fill={fill} fillRule="evenodd" id="svg_1">
                        <g fillRule="nonzero" id="svg_2">
                            <path d="M30.6276,9.99306L26.69038,6.0476L28.65797,2.10352L35.05517,8.51411C35.87026,9.33091 35.87026,10.65521 35.05517,11.472L27.18143,19.36223C26.36633,20.17903 25.04481,20.17903 24.22971,19.36223C23.41462,18.54543 23.41462,17.22114 24.22971,16.40434L30.6276,9.99306z" opacity=".56" id="svg_3"></path>
                            <path d="M24.23118,0.61615C25.04627,-0.20065 26.36814,-0.20031 27.18323,0.61649L28.65943,2.09578L11.43678,19.3545C10.62168,20.1713 9.29981,20.17096 8.48472,19.35416L7.00852,17.87487L24.23118,0.61615zM16.84984,6.04055L13.89745,8.99913L9.96023,5.05368L5.03889,9.98533L8.9761,13.93078L7.00852,17.87487L0.61132,11.46427C-0.20377,10.64747 -0.20377,9.32318 0.61132,8.50638L8.48472,0.61649C9.29981,-0.20031 10.62168,-0.20065 11.43678,0.61615L16.84984,6.04055z" id="svg_4"></path>
                        </g>
                    </g>
                </svg>
            </Box>
        </Link>
    )
}

export default Logo
