import React from "react";
import FooterContent from "./footer-content";
import { Link } from "@/components/navigation";
import Image from "next/image";
import { Icon } from "@/components/ui/icon";
import { auth } from "@/lib/auth";
import Cookies from "js-cookie";

const DashCodeFooter = () => {
  const username = Cookies.get("state");
  const picture = Cookies.get("profile_picture");
  return (
    <FooterContent>
      <div className=" md:flex  justify-between text-default-600 hidden">
        <div className="text-center ltr:md:text-start rtl:md:text-right text-sm"></div>
        <div className="ltr:md:text-right rtl:md:text-end text-center text-sm">
          COPYRIGHT &copy; {new Date().getFullYear()} Media Hub, All rights
          Reserved
        </div>
      </div>
      <div className="flex md:hidden justify-around items-center">
        <Link href="/app/chat" className="text-default-600">
          <div>
            <span className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1">
              <Icon icon="heroicons-outline:mail" />
              <span className="absolute right-[5px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
                10
              </span>
            </span>
            <span className="block text-xs text-default-600">Messages</span>
          </div>
        </Link>
        <Link
          href="profile"
          className="relative bg-card bg-no-repeat backdrop-filter backdrop-blur-[40px] rounded-full footer-bg dark:bg-default-300 h-[65px] w-[65px] z-[-1] -mt-[40px] flex justify-center items-center"
        >
          <div className="h-[50px] w-[50px] rounded-full relative left-[0px] top-[0px] custom-dropshadow">
            <Image
              src={picture as string}
              alt={username as string}
              width={50}
              height={50}
              className="w-full h-full rounded-full border-2"
            />
          </div>
        </Link>
        <Link href="notifications">
          <div>
            <span className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1">
              <Icon icon="heroicons-outline:bell" />
              <span className="absolute right-[17px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
                2
              </span>
            </span>
            <span className="block text-xs text-default-600">
              Notifications
            </span>
          </div>
        </Link>
      </div>
    </FooterContent>
  );
};

export default DashCodeFooter;