import Link from "next/link";
import { useId } from "react";

export default function Logo() {
    const mainGradientId = useId();
    const foldGradientId = useId();

    return (
        <Link
            href="/"
            aria-label="TurboCI home"
            className="inline-flex items-center gap-3"
        >
            <svg
                viewBox="0 0 48 48"
                aria-hidden="true"
                className="h-10 w-10 shrink-0"
            >
                <defs>
                    <linearGradient
                        id={mainGradientId}
                        x1="9"
                        y1="9"
                        x2="31"
                        y2="34"
                        gradientUnits="userSpaceOnUse"
                    >
                        <stop offset="0%" stopColor="#9cf0c0" />
                        <stop offset="100%" stopColor="#42d392" />
                    </linearGradient>
                    <linearGradient
                        id={foldGradientId}
                        x1="22"
                        y1="22"
                        x2="36"
                        y2="40"
                        gradientUnits="userSpaceOnUse"
                    >
                        <stop offset="0%" stopColor="#2bc67e" />
                        <stop offset="100%" stopColor="#1f8458" />
                    </linearGradient>
                </defs>

                <path
                    d="M35 6H23.6c-2 0-3.8 1-4.8 2.7L7.5 28.3c-1.4 2.5.4 5.7 3.2 5.7h9.1c2 0 3.8-1 4.8-2.7l11.2-19.6C39.6 9.2 37.8 6 35 6Z"
                    fill={`url(#${mainGradientId})`}
                />
                <path
                    d="M23.9 24h13.4c2.8 0 4.6 3.1 3.2 5.6l-4.1 7.1c-1 1.7-2.8 2.7-4.8 2.7H18.2c-2.8 0-4.6-3.1-3.2-5.6l4.1-7.1c1-1.7 2.8-2.7 4.8-2.7Z"
                    fill={`url(#${foldGradientId})`}
                />
            </svg>

            <span className="font-display text-[1.02rem] font-semibold tracking-tight text-foreground">
                TurboCI
            </span>
        </Link>
    );
}
