"use client";

import React, { useState, useRef } from "react";
import { motion } from "motion/react";

const footerLinks = [
  {
    id: 1,
    title: "About",
    url: "#",
  },
  {
    id: 2,
    title: "Contact",
    url: "#",
  },
  {
    id: 3,
    title: "Blog",
    url: "#",
  },
  {
    id: 4,
    title: "Story",
    url: "#",
  },
  {
    id: 5,
    title: "Company",
    url: "#",
  },
  {
    id: 6,
    title: "Product",
    url: "#",
  },
  {
    id: 7,
    title: "Press",
    url: "#",
  },
  {
    id: 8,
    title: "More",
    url: "#",
  },
];

const DirectionAwareLink = ({ title, url }: { title: string; url: string }) => {
  const [isHovered, setIsHovered] = useState(false);
  const ref = useRef<HTMLAnchorElement>(null);
  const [direction, setDirection] = useState<"left" | "right">("left");

  const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
    setIsHovered(true);
    const boundingBox = ref.current?.getBoundingClientRect();
    if (boundingBox) {
      const mouseX = e.clientX - boundingBox.left;
      setDirection(mouseX < boundingBox.width / 2 ? "left" : "right");
    }
  };

  return (
    <a
      ref={ref}
      href={url}
      className="text-secondary-foreground/70 hover:text-primary relative"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={() => setIsHovered(false)}
    >
      {title}
      <motion.span
        initial={{ scaleX: 0 }}
        animate={{ scaleX: isHovered ? 1 : 0 }}
        transition={{ duration: 0.2, ease: "easeInOut" }}
        className="absolute -bottom-1 left-0 right-0 h-[1px] bg-current transform-origin-left"
        style={{
          originX: direction === "left" ? 0 : 1,
        }}
      />
    </a>
  );
};

export default function Footer() {
  return (
    <footer className="bg-background w-full h-full">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-x-5 gap-y-10 p-7 md:p-10">
        <div className="flex w-full flex-col items-start justify-start gap-y-2">
          <a href="/" className="border border-dashed rounded-lg px-2 py-1">
            <span className=" text-lg font-bold">Logo</span>
          </a>
          <p className="text-balance text-secondary-foreground text-sm font-medium">
            What matters is productivity with fun culture and a good work
            environment.
          </p>
        </div>

        <div className="flex w-full flex-col items-start md:items-center justify-center gap-y-2">
          <ul className="grid grid-cols-2 gap-5 gap-x-10 text-sm">
            {footerLinks.map((link) => (
              <li className="footer-link-item" key={link.id}>
                <DirectionAwareLink title={link.title} url={link.url} />
              </li>
            ))}
          </ul>
        </div>

        <div className="w-full border rounded-lg border-dashed h-fit p-5">
          <div className="flex items-center justify-betwee">
            <div className="flex flex-col gap-y-2 w-full">
              <a
                href="/"
                className="border border-dashed rounded-lg px-2 py-1 w-fit"
              >
                <span className=" text-lg font-bold">Logo</span>
              </a>
              <div className="flex flex-col min-[500px]:flex-row items-start gap-y-3 min-[500px]:items-center justify-between w-full">
                <div className="flex flex-col gap-y-0.5">
                  <p className="text-sm font-medium">Follow us on twitter</p>
                  <p className="text-xs text-secondary-foreground/60">
                    notion.com
                  </p>
                </div>
                <button className="w-full min-[500px]:w-fit rounded-full border bg-background px-5 h-8 text-sm font-semibold transition hover:bg-secondary">
                  Follow
                </button>
              </div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </footer>
  );
}
Footer

Footer-1

Footer-2
