import Link from "next/link";
import Image from "next/image";

import { Twitter } from "lucide-react";
import { GitHubLogoIcon } from "@radix-ui/react-icons";

import { siteConfig } from "@/lib/config";

import BlurFade from "./blur-fade";

export function Footer() {
  return (
    <BlurFade inView>
      <footer className="pb-16 pt-8">
        <div className="layout ">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-x-2 p-2 rounded-md bg-[#D7D7D799] bg-opacity-60 shadow-[0_4px_7px_0_rgba(255,255,255,0.12)_inset] backdrop-blur-xs">
              <figure className="relative h-[23px] w-[18px] sm:h-[43px] sm:w-[38px]">
                <Image src={"/logo.png"} alt="logo" fill={true} />
              </figure>
              <h2 className="text-base sm:text-3xl font-bold">
                {siteConfig.name}
              </h2>
            </div>
            <ul className="flex items-center gap-5 p-3 rounded-md bg-[#D7D7D799] bg-opacity-60 shadow-[0_4px_7px_0_rgba(255,255,255,0.12)_inset] backdrop-blur-xs">
              <li>
                <Link href={"https://x.com/home?lang=id"}>
                  <GitHubLogoIcon className="h-6 w-6 sm:h-10 sm:w-10" />
                </Link>
              </li>
              <li>
                <Link href={"https://x.com/home?lang=id"}>
                  <svg
                    // width="53"
                    // height="54"
                    viewBox="0 0 53 54"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6 sm:h-10 sm:w-10"
                  >
                    <path
                      d="M41.7189 0.314453H49.8072L32.1406 22.81L53 53.3145H36.6104L23.8394 34.8233L9.15261 53.3145H1.06426L20.008 29.2878L0 0.314453H16.8153L28.4157 17.2745L41.7189 0.314453ZM38.8454 47.8967H43.3153L14.3675 5.3789H9.47189L38.8454 47.8967Z"
                      fill="#222222"
                    />
                  </svg>
                </Link>
              </li>
            </ul>
          </div>
          <div className="flex justify-center p-2 rounded-md bg-[#D7D7D799] bg-opacity-60 shadow-[0_4px_7px_0_rgba(255,255,255,0.12)_inset] backdrop-blur-xs">
            <p className="text-center font-light">All rights reserved</p>
          </div>
        </div>
      </footer>
    </BlurFade>
  );
}
