import { cn } from "@/lib/utils";
import type { PropsWithClassName } from "@/types";
import Image from "next/image";

type IconProps = React.HTMLAttributes<SVGElement>;

interface LogoImgProps extends PropsWithClassName {
	width?: number;
	height?: number;
	variant?: "nav" | "default";
}

export const Icons = {
	logoImg: ({
		className,
		width = 180,
		height = 38,
		variant = "default",
	}: LogoImgProps) => (
		<Image
			className={cn(
				"dark:invert self-center",
				variant === "nav" ? "w-full h-10" : "",
				className,
			)}
			src="/colidevs-logo.svg"
			alt="colidevs logo"
			width={width}
			height={height}
			priority
		/>
	),
	logo: (props: IconProps) => (
		<svg
			{...props}
			aria-label="logo"
			width="199"
			height="151"
			viewBox="0 0 199 151"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
		>
			<title className="sr-only">logo</title>
			<path
				d="M109.008 35.2778C111.3 35.7437 113.128 36.5049 114.466 38.5221C115.416 39.9528 115.873 41.7011 115.509 43.392C115.159 45.0135 114.138 46.3832 112.747 47.2734C111.153 48.2938 109.318 48.7055 107.461 48.3206C105.99 48.1541 104.16 47.0081 103.165 45.9351C101.992 44.6687 101.122 42.9 101.199 41.1499C101.266 39.6213 102.07 38.2108 103.197 37.205C104.771 35.8005 106.915 35.1461 109.008 35.2778Z"
				fill="white"
			/>
			<path
				d="M109.688 13.639C110.495 13.7078 111.299 13.8043 112.1 13.9284C112.9 14.0525 113.695 14.204 114.486 14.383C115.276 14.5618 116.059 14.7676 116.835 15.0004C117.612 15.2332 118.379 15.4923 119.138 15.7778C119.896 16.0633 120.644 16.3746 121.381 16.7116C122.118 17.0485 122.842 17.4103 123.555 17.797C124.267 18.1838 124.965 18.5945 125.649 19.0292C126.333 19.4639 127.001 19.9215 127.654 20.4021C132.39 23.957 137.274 30.1554 141.873 32.9982C147.395 36.8624 155.157 40.6021 161.748 42.1963C176.485 45.7617 173.04 44.9003 191.662 48.9464C193.525 49.3512 197.132 50.4511 198.841 51.0591C196.983 51.6662 190.734 50.3114 187.622 50.0609C184.24 49.7816 180.972 48.8885 177.583 48.7317C168.216 47.3127 158.615 47.2439 152.391 48.4726C151.419 48.6644 147.247 49.9668 146.433 50.3168C145.619 50.6665 147.654 49.792 146.433 50.3168C145.212 50.8415 140.077 53.5297 138.875 54.0467C137.672 54.5636 134.076 57.2332 133.274 58.0377C123.631 67.7042 123.001 78.5398 115.929 90.7055C105.52 108.613 87.6816 118.471 68.0398 123.345C61.0256 125.086 53.85 126.211 46.8894 128.171C42.2636 129.473 37.7289 131.276 33.3743 133.294C28.9554 135.351 24.7192 137.728 20.6657 140.426C19.0556 141.478 17.4836 142.583 15.9496 143.742C13.1406 145.901 9.59571 149.649 6.20122 150.492C5.26588 150.725 4.29762 150.698 3.4627 150.155C2.52484 149.545 1.94124 148.608 1.69753 147.532C0.539275 142.42 5.39759 129.53 7.69168 124.657C9.43037 121.017 11.4055 117.509 13.617 114.134C20.4351 103.673 31.21 92.9823 41.8254 86.3156C43.5945 85.2046 45.8456 83.6591 47.9238 83.2534C49.0183 83.0398 50.0785 83.2279 51.0012 83.8694C52.3863 84.832 53.3827 86.7801 53.6712 88.4065C53.9916 90.2134 53.2418 91.5897 51.9845 92.839C49.8223 94.9872 46.8645 96.3389 44.302 97.9568C42.1985 99.2845 40.182 100.84 38.2823 102.441C36.5503 103.905 34.8827 105.439 33.2794 107.043C31.6758 108.645 30.142 110.312 28.6776 112.042C27.2136 113.772 25.824 115.56 24.5089 117.406C23.1938 119.251 21.9578 121.148 20.8012 123.096C19.1308 125.919 17.8273 129.109 15.9798 131.789C18.8801 129.871 21.698 127.747 24.6852 125.973C33.4716 120.755 43.6312 117.11 53.6747 115.217C60.9745 113.84 68.4663 112.949 75.5287 110.583C76.3009 110.32 77.0676 110.041 77.8285 109.746C78.5889 109.451 79.3429 109.141 80.0905 108.815C80.8381 108.489 81.5783 108.148 82.3114 107.791C83.0445 107.434 83.7698 107.062 84.4872 106.676C85.2049 106.289 85.9141 105.888 86.6147 105.472C87.3152 105.056 88.0069 104.625 88.6894 104.18C89.372 103.735 90.0449 103.277 90.7085 102.804C91.3714 102.331 92.0245 101.845 92.6676 101.345C93.3105 100.846 93.9427 100.333 94.564 99.8072C95.1856 99.2812 95.7956 98.7427 96.3943 98.1911C96.9932 97.6402 97.5803 97.0768 98.1556 96.5014C98.7309 95.9256 99.2938 95.3383 99.8443 94.7394C100.395 94.1401 100.933 93.5298 101.458 92.9085C101.983 92.2874 102.495 91.6557 102.994 91.013C103.493 90.3704 103.978 89.7175 104.449 89.0547C104.921 88.3921 105.378 87.7197 105.821 87.0377C107.617 84.2218 109.012 81.1105 110.493 78.119C112.556 73.8768 114.3 69.4338 116.471 65.2587C116.773 64.6913 117.087 64.131 117.413 63.5777C117.739 63.0243 118.077 62.4783 118.427 61.9393C118.777 61.4006 119.139 60.8699 119.512 60.3467C119.886 59.8235 120.27 59.3088 120.666 58.8027C121.062 58.2962 121.468 57.7986 121.886 57.3098C122.303 56.8211 122.731 56.3419 123.17 55.872C123.608 55.4017 124.057 54.9414 124.515 54.4906C124.974 54.0398 125.442 53.5995 125.92 53.1693C126.398 52.7388 126.885 52.3188 127.381 51.9096C127.877 51.5003 128.382 51.102 128.896 50.7145C129.409 50.3272 129.931 49.9512 130.461 49.5864C130.992 49.2218 131.53 48.8685 132.075 48.5267C132.621 48.1854 133.174 47.8559 133.734 47.5381C134.294 47.2208 134.861 46.9155 135.434 46.6221C136.008 46.3292 136.588 46.0488 137.173 45.781C137.759 45.5127 138.35 45.2574 138.948 45.0151C141.547 43.9337 144.29 43.1858 146.974 42.3415C142.932 41.6196 136.801 40.0457 133.322 37.9239C131.21 36.6357 129.47 34.8257 127.668 33.1567C122.693 28.5477 117.575 24.7747 110.704 23.7778C101.73 22.4757 95.0147 26.3662 88.0572 31.4413C86.0714 32.8905 83.6736 34.3936 82.1341 36.329C80.5589 38.3091 80.2281 41.7799 78.1254 43.2271C75.9687 44.71 73.162 42.7474 71.3892 41.4479C56.6747 30.6612 40.9 20.1045 23.348 14.522C19.4371 13.2783 15.528 12.4074 11.5042 11.6167C12.5228 16.1557 14.2348 20.8137 17.1577 24.5064C19.9765 28.0678 28.606 33.705 32.7858 35.6675C35.4598 36.9228 38.2756 37.7596 41.0514 38.7495C45.3092 40.2673 49.5467 41.8585 53.8892 43.1232C57.3005 44.1169 61.0152 44.5912 64.2916 45.9589C65.6807 46.5384 66.9203 47.3512 67.7754 48.6127C68.5605 49.7703 68.9189 51.3162 68.6223 52.6883C68.4194 53.627 67.87 54.3549 67.0549 54.8499C61.0852 58.4728 43.6138 50.3596 37.7327 47.6847C35.6409 46.7329 33.1605 45.0624 30.9276 44.6312C30.4396 44.5363 30.2123 44.5528 29.8118 44.8232C29.6765 45.1976 29.6989 45.411 29.8249 45.7903C30.2892 47.1911 31.672 48.6815 32.6363 49.8011C39.4887 57.7542 51.3807 64.8416 61.4805 67.5696C62.9096 67.9556 64.3605 68.3069 65.824 68.5327C69.0807 69.0357 73.2183 69.0678 76.1712 70.5694C77.3661 71.177 78.3889 71.9793 78.8056 73.2954C79.1214 74.2931 78.9854 75.3519 78.4823 76.2606C77.8134 77.4681 76.7172 78.1489 75.4098 78.508C69.1123 80.2372 58.1009 77.2387 52.042 74.8614C49.252 73.7397 46.5476 72.4405 43.9285 70.9631C34.8418 65.8929 26.8289 58.4334 20.6564 50.1193C18.582 47.3245 16.7234 44.3467 14.8015 41.4453C9.28368 33.1141 5.07986 25.948 2.30239 16.2454C1.43053 13.1993 -0.876256 4.96298 0.857904 2.07062C1.25244 1.41249 1.6665 1.06863 2.41926 0.875077C5.33719 0.125183 9.50108 1.39307 12.4191 1.95471C35.2832 6.35571 49.4843 15.5227 68.9754 27.3865C71.214 28.7491 73.5614 29.9073 75.8032 31.257C77.2578 29.1868 82.1001 24.6672 84.1885 22.7864C91.5598 16.1467 99.7014 13.1062 109.688 13.639Z"
				fill="white"
			/>
		</svg>
	),
	x: (props: IconProps) => (
		<svg
			{...props}
			aria-label="x"
			height="23"
			viewBox="0 0 1200 1227"
			width="23"
			xmlns="http://www.w3.org/2000/svg"
		>
			<title className="sr-only">x</title>
			<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
		</svg>
	),
	instagram: (props: IconProps) => (
		<svg
			{...props}
			aria-label="instagram"
			xmlns="http://www.w3.org/2000/svg"
			width="23"
			height="23"
			viewBox="0 0 23 23"
			fill="none"
			stroke="currentColor"
			strokeWidth="2"
			strokeLinecap="round"
			strokeLinejoin="round"
		>
			<title className="sr-only">instagram</title>
			<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
			<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
			<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
		</svg>
	),
	gitHub: (props: IconProps) => (
		<svg {...props} viewBox="0 0 438.549 438.549" aria-label="gitHub">
			<title className="sr-only">gitHub</title>
			<path
				fill="currentColor"
				d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
			/>
		</svg>
	),
	spinner: (props: IconProps) => (
		<svg
			aria-label="spinner"
			xmlns="http://www.w3.org/2000/svg"
			width="24"
			height="24"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			strokeWidth="2"
			strokeLinecap="round"
			strokeLinejoin="round"
			{...props}
		>
			<title className="sr-only">spinner</title>
			<path d="M21 12a9 9 0 1 1-6.219-8.56" />
		</svg>
	),
};
