import { Button, ButtonProps } from '@mantine/core';

function LogidexIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg
      viewBox="0 0 685 789"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ width: 24, height: 24 }}
    >
      <path
        d="M0 561.604V230.18C0 212.417 9.42351 195.988 24.7558 187.02L319.089 14.863C334.772 5.69023 354.196 5.74604 369.825 15.0088L659.992 186.975C675.184 195.979 684.5 212.329 684.5 229.989V561.794C684.5 579.57 675.061 596.011 659.709 604.973L369.544 774.378C354.056 783.421 334.912 783.475 319.373 774.522L25.0375 604.927C9.5463 596.001 0 579.482 0 561.604Z"
        fill="black"
      />
      <path
        d="M62.5 525.821V265.415C62.5 247.647 71.9298 231.213 87.2702 222.247L318.944 86.8432C334.62 77.6817 354.029 77.7374 369.651 86.9889L597.977 222.202C613.178 231.204 622.5 247.558 622.5 265.224V526.011C622.5 543.793 613.055 560.238 597.695 569.199L369.371 702.398C353.89 711.429 334.76 711.484 319.228 702.541L87.5518 569.152C72.0526 560.228 62.5 543.705 62.5 525.821Z"
        stroke="white"
        stroke-width="35"
      />
      <path
        d="M503.632 320.536C504.247 320.201 505 320.626 505 321.326V468.944C505 480.497 498.866 491.181 488.891 497.008L359.844 572.379C359.452 572.608 359.057 572.828 358.658 573.039C355.715 574.597 352.5 572.205 352.5 568.876V405.905C352.5 404.075 353.5 402.391 355.107 401.515L399.607 377.253C402.938 375.436 407 377.848 407 381.643V417.451C407 418.36 408.115 418.797 408.733 418.131L430.309 394.863C431.643 393.424 433.695 392.898 435.557 393.519L453.684 399.562C454.331 399.777 455 399.295 455 398.612V350.02C455 348.19 456 346.506 457.607 345.63L503.632 320.536ZM329.908 401.489C331.507 402.367 332.5 404.047 332.5 405.871V569.09C332.5 571.926 329.68 573.888 327.223 572.472L196.27 496.987C186.36 491.275 180.195 480.783 180.005 469.374L180 468.83V321.441C180 320.376 181.146 319.748 182.079 320.261L329.908 401.489ZM403 481.499C398.858 481.499 395.5 484.857 395.5 488.999V521C395.5 525.142 398.858 528.5 403 528.5C407.142 528.5 410.5 525.142 410.5 521V488.999C410.5 484.857 407.142 481.499 403 481.499ZM435.5 465.5C431.358 465.5 428 468.858 428 473V505.001C428 509.143 431.358 512.501 435.5 512.501C439.642 512.501 443 509.143 443 505.001V473C443 468.858 439.642 465.5 435.5 465.5ZM465.5 449.501C461.358 449.501 458 452.859 458 457.001V489.002C458 493.144 461.358 496.502 465.5 496.502C469.642 496.502 473 493.144 473 489.002V457.001C473 452.859 469.642 449.501 465.5 449.501ZM405.733 346.78C406.516 347.224 407 348.055 407 348.956C407 349.872 406.5 350.714 405.696 351.152L344.92 384.289C343.423 385.105 341.613 385.102 340.119 384.281L192.992 303.438C190.226 301.918 189.541 298.221 191.989 296.23C193.269 295.189 194.637 294.239 196.086 293.391L250.472 261.566C252.012 260.666 253.914 260.653 255.465 261.533L405.733 346.78ZM327.038 216.766C337.234 210.8 349.865 210.836 360.026 216.86L489.074 293.37C490.705 294.337 492.231 295.433 493.643 296.643C496.011 298.671 495.287 302.306 492.55 303.798L455.407 324.048C453.898 324.871 452.072 324.861 450.572 324.021L301.361 240.518C297.988 238.63 297.941 233.791 301.278 231.839L327.038 216.766Z"
        fill="white"
      />
    </svg>
  );
}
export function LogidexButton(props: ButtonProps & React.ComponentPropsWithoutRef<'button'>) {
  return <Button leftSection={<LogidexIcon />} variant="default" {...props} />;
}
