package components

import "fmt"

templ Icon(name string, size int) {
	<svg
		xmlns="http://www.w3.org/2000/svg"
		class="icon"
		width={ fmt.Sprintf("%d", size) }
		height={ fmt.Sprintf("%d", size) }
		viewBox="0 0 24 24"
		stroke-width="2"
		stroke="currentColor"
		fill="none"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
		switch name {
			case "fuel":
				<path d="M14 11h1a2 2 0 0 1 2 2v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a6 6 0 0 0 -6 -6h-1m-4 0a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2v-6z"></path>
			case "plus":
				<line x1="12" y1="5" x2="12" y2="19"></line>
				<line x1="5" y1="12" x2="19" y2="12"></line>
			case "home":
				<polyline points="5,12 3,12 12,3 21,12 19,12"></polyline>
				<path d="m5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
				<path d="m9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
			case "car":
				<circle cx="7" cy="17" r="2"></circle>
				<circle cx="17" cy="17" r="2"></circle>
				<path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5"></path>
			case "chart-bar":
				<path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
				<path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
				<path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
			case "settings":
				<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
				<circle cx="12" cy="12" r="3"></circle>
			case "logout":
				<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
				<path d="M20 12h-13l3 -3m0 6l-3 -3"></path>
			case "check":
				<path d="M5 12l5 5l10 -10"></path>
			case "alert-circle":
				<circle cx="12" cy="12" r="9"></circle>
				<line x1="12" y1="8" x2="12" y2="12"></line>
				<line x1="12" y1="16" x2="12.01" y2="16"></line>
			case "alert-triangle":
				<path d="M12 9v2m0 4v.01"></path>
				<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
			case "info-circle":
				<circle cx="12" cy="12" r="9"></circle>
				<line x1="12" y1="8" x2="12.01" y2="8"></line>
				<polyline points="11,12 12,12 12,16 13,16"></polyline>
			case "calendar":
				<rect x="4" y="5" width="16" height="16" rx="2"></rect>
				<line x1="16" y1="3" x2="16" y2="7"></line>
				<line x1="8" y1="3" x2="8" y2="7"></line>
				<line x1="4" y1="11" x2="20" y2="11"></line>
			case "location":
				<circle cx="12" cy="11" r="3"></circle>
				<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
			case "edit":
				<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
				<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
				<path d="M16 5l3 3"></path>
			case "trash":
				<path d="M4 7l16 0"></path>
				<path d="M10 11l0 6"></path>
				<path d="M14 11l0 6"></path>
				<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
				<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
			case "currency":
				<circle cx="12" cy="12" r="3"></circle>
				<path d="M3 12h6m6 0h6"></path>
			case "save":
				<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
				<circle cx="12" cy="14" r="2"></circle>
				<polyline points="14,4 14,8 8,8 8,4"></polyline>
			case "arrow-left":
				<path d="M5 12l14 -7"></path>
				<path d="M5 12l14 7"></path>
			case "clock":
				<circle cx="12" cy="12" r="9"></circle>
				<polyline points="12,7 12,12 15,15"></polyline>
			case "gas-station":
				<path d="M6.8 11a6 6 0 1 0 10.396 0l-.436 -2.183a4 4 0 1 0 -9.564 0l-.396 2.183z"></path>
				<path d="M6 14h12a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-2a2 2 0 0 1 2 -2z"></path>
			case "user":
				<circle cx="12" cy="7" r="4"></circle>
				<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
			case "lock":
				<rect x="5" y="11" width="14" height="10" rx="2"></rect>
				<circle cx="12" cy="16" r="1"></circle>
				<path d="M8 11v-4a4 4 0 0 1 8 0v4"></path>
			case "eye":
				<circle cx="12" cy="12" r="2"></circle>
				<path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
			case "eye-off":
				<line x1="3" y1="3" x2="21" y2="21"></line>
				<path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
				<path d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341"></path>
			case "gauge":
				<circle cx="12" cy="12" r="9"></circle>
				<path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1"></path>
				<path d="M12 6v2m0 8v2"></path>
			case "notes":
				<path d="M8 2v4"></path>
				<path d="M16 2v4"></path>
				<rect x="3" y="4" width="18" height="18" rx="2"></rect>
				<path d="M3 10h18"></path>
				<path d="M8 14h.01"></path>
				<path d="M12 14h.01"></path>
				<path d="M16 14h.01"></path>
				<path d="M8 18h.01"></path>
				<path d="M12 18h.01"></path>
				<path d="M16 18h.01"></path>
			case "refresh":
				<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
				<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
			case "license-plate":
				<rect x="4" y="4" width="6" height="6" rx="1"></rect>
				<rect x="4" y="14" width="6" height="6" rx="1"></rect>
				<rect x="14" y="14" width="6" height="6" rx="1"></rect>
				<line x1="14" y1="7" x2="20" y2="7"></line>
				<line x1="17" y1="4" x2="17" y2="10"></line>
			case "brand":
				<path d="M9 11l-4 4l4 4m-4 -4h11a4 4 0 0 0 0 -8h-1"></path>
			case "model":
				<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9z"></path>
				<path d="M12 12l8 -4.5"></path>
				<path d="M12 12l0 9"></path>
				<path d="M12 12l-8 -4.5"></path>
			case "status":
				<circle cx="12" cy="12" r="9"></circle>
				<polyline points="9,11 12,8 15,11"></polyline>
				<line x1="12" y1="8" x2="12" y2="16"></line>
			case "trip":
				<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
				<path d="M12 7v5l3 3"></path>
			case "database":
				<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
				<path d="M3 5v14a9 3 0 0 0 18 0v-14"></path>
				<path d="M3 12a9 3 0 0 0 18 0"></path>
			case "download":
				<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
				<polyline points="7,11 12,16 17,11"></polyline>
				<line x1="12" y1="2" x2="12" y2="16"></line>
			case "upload":
				<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
				<polyline points="7,9 12,4 17,9"></polyline>
				<line x1="12" y1="4" x2="12" y2="16"></line>
			case "zap":
				<polygon points="13,2 3,14 12,14 11,22 21,10 12,10"></polygon>
			case "search":
				<circle cx="11" cy="11" r="8"></circle>
				<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
			case "dots-vertical":
				<circle cx="12" cy="12" r="1"></circle>
				<circle cx="12" cy="5" r="1"></circle>
				<circle cx="12" cy="19" r="1"></circle>
			case "award":
				<circle cx="12" cy="8" r="7"></circle>
				<polyline points="8.21,13.89 7,23 12,20 17,23 15.79,13.88"></polyline>
			default:
				<circle cx="12" cy="12" r="10"></circle>
		}
	</svg>
}

templ IconWithClass(name string, size int, class string) {
	<svg
		xmlns="http://www.w3.org/2000/svg"
		class={ "icon", class }
		width={ fmt.Sprintf("%d", size) }
		height={ fmt.Sprintf("%d", size) }
		viewBox="0 0 24 24"
		stroke-width="2"
		stroke="currentColor"
		fill="none"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
		@renderIconPath(name)
	</svg>
}

templ renderIconPath(name string) {
	switch name {
		case "fuel":
			<path d="M14 11h1a2 2 0 0 1 2 2v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a6 6 0 0 0 -6 -6h-1m-4 0a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2v-6z"></path>
		case "plus":
			<line x1="12" y1="5" x2="12" y2="19"></line>
			<line x1="5" y1="12" x2="19" y2="12"></line>
		default:
			<circle cx="12" cy="12" r="10"></circle>
	}
}