import {
  IconBrandLinkedinFilled,
  IconMailFilled,
  IconPhoneFilled,
} from "@tabler/icons-react";
import GiteaIcon from "@/components/icons/GiteaIcon";
import Tooltip from "@/components/ui/Tooltip";
import CopyButton from "@/components/ui/CopyButton";
import { email, linkedIn, phone, gitea } from "@/constants";

export default function Footer() {
  return (
    <footer className="mx-auto w-full max-w-4xl px-6 py-6 flex items-center justify-between border-t border-neutral-800 text-xs text-neutral-500 sticky bottom-0 backdrop-blur-lg">
      <span>© 2026 Angel Mankel</span>
      <nav aria-label="Contact" className="flex gap-3 text-neutral-600">
        <CopyButton value={email} label="Copy email">
          <IconMailFilled size={18} />
        </CopyButton>
        <CopyButton value={phone} label="Copy phone">
          <IconPhoneFilled size={18} />
        </CopyButton>
        <Tooltip text="LinkedIn">
          <a
            href={linkedIn}
            target="_blank"
            rel="noreferrer"
            aria-label="LinkedIn"
            className="rounded-md p-1 transition-colors duration-200 hover:text-neutral-200"
          >
            <IconBrandLinkedinFilled size={18} />
          </a>
        </Tooltip>
        <Tooltip text="Gitea">
          <a
            href={gitea}
            target="_blank"
            rel="noreferrer"
            aria-label="Gitea"
            className="rounded-md p-1 transition-colors duration-200 hover:text-neutral-200"
          >
            <GiteaIcon size={18} />
          </a>
        </Tooltip>
      </nav>
    </footer>
  );
}