'use client';

import { motion, HTMLMotionProps } from 'framer-motion';
import React from 'react';

const AnimatedIcon: React.FC<HTMLMotionProps<'div'>> = ({ children, ...props }) => {
  return (
    <motion.div
      className="w-[42px] h-8 rounded-md flex justify-center items-center cursor-pointer text-white hover:text-white/80"
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      {...props}
    >
      {children}
    </motion.div>
  );
};

export default function Footer() {
  return (
    <footer id="footer" className="bg-black">
      <div className="relative mx-auto container max-w-[1128px] min-h-[100px] px-8 flex flex-col justify-around items-center gap-2 pt-4">
        <div>
          <div className="flex items-center justify-center mb-4 gap-4">
            <a href="https://github.com/Dotbaseai" target="_blank" rel="noopener noreferrer">
              <AnimatedIcon>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M9.99999 0.526611C4.76578 0.526611 0.526306 4.76609 0.526306 10.0003C0.526306 14.1924 3.23815 17.7332 7.00394 18.9885C7.47762 19.0713 7.65525 18.7871 7.65525 18.5385C7.65525 18.3135 7.64341 17.5675 7.64341 16.774C5.26315 17.2122 4.64736 16.1938 4.45789 15.6608C4.35131 15.3885 3.88946 14.5477 3.48683 14.3227C3.15525 14.145 2.68157 13.7069 3.47499 13.695C4.22104 13.6832 4.75394 14.3819 4.93157 14.6661C5.7842 16.099 7.14604 15.6964 7.69078 15.4477C7.77367 14.8319 8.02236 14.4175 8.29473 14.1806C6.18683 13.9438 3.9842 13.1266 3.9842 9.50293C3.9842 8.47266 4.35131 7.62003 4.95525 6.95687C4.86052 6.72003 4.52894 5.74898 5.04999 4.44635C5.04999 4.44635 5.84341 4.19766 7.65525 5.4174C8.41315 5.20424 9.21841 5.09766 10.0237 5.09766C10.8289 5.09766 11.6342 5.20424 12.3921 5.4174C14.204 4.18582 14.9974 4.44635 14.9974 4.44635C15.5184 5.74898 15.1868 6.72003 15.0921 6.95687C15.6961 7.62003 16.0631 8.46082 16.0631 9.50293C16.0631 13.1385 13.8487 13.9438 11.7408 14.1806C12.0842 14.4766 12.3803 15.045 12.3803 15.9332C12.3803 17.2003 12.3684 18.2187 12.3684 18.5385C12.3684 18.7871 12.5461 19.0832 13.0198 18.9885C16.7619 17.7332 19.4737 14.1806 19.4737 10.0003C19.4737 4.76609 15.2342 0.526611 9.99999 0.526611Z"
                    fill="currentColor"
                  />
                </svg>
              </AnimatedIcon>
            </a>

            <a href="https://dotbase.gitbook.io/dotbase" target="_blank" rel="noopener noreferrer">
              <AnimatedIcon>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M8.4297 10.5294C9.3925 11.085 9.87388 11.3629 10.4026 11.3634C10.9313 11.3638 11.4131 11.0868 12.3769 10.5328L18.5205 7.00132C18.7978 6.84191 18.9688 6.5464 18.9688 6.22649C18.9688 5.90659 18.7978 5.61108 18.5205 5.45166L12.3747 1.9189C11.412 1.36549 10.9306 1.08878 10.4024 1.08899C9.87425 1.0892 9.39311 1.36628 8.43081 1.92044L3.14751 4.96293C3.10835 4.98548 3.08878 4.99674 3.07052 5.00742C1.26579 6.06391 0.150771 7.99271 0.135862 10.0839C0.135712 10.105 0.135712 10.1276 0.135712 10.1728C0.135712 10.2179 0.135712 10.2405 0.135862 10.2616C0.150738 12.3504 1.26327 14.2774 3.06479 15.3347C3.08299 15.3454 3.10253 15.3567 3.14164 15.3793L6.45108 17.2901C8.37948 18.4035 9.34367 18.9602 10.4025 18.9605C11.4614 18.9609 12.4259 18.4048 14.3551 17.2927L17.8487 15.2788C18.8146 14.7219 19.2976 14.4435 19.5628 13.9845C19.828 13.5255 19.828 12.968 19.828 11.853V9.69911C19.828 9.38979 19.6605 9.10474 19.3903 8.95422C19.1287 8.80859 18.81 8.81074 18.5505 8.95991L11.3869 13.0778C10.9063 13.3541 10.666 13.4922 10.4023 13.4923C10.1386 13.4923 9.89816 13.3543 9.41736 13.0784L4.56887 10.2952C4.32601 10.1558 4.20456 10.0861 4.10702 10.0735C3.88465 10.0448 3.67084 10.1694 3.58613 10.377C3.54899 10.4681 3.54973 10.6081 3.55124 10.8881C3.55235 11.0943 3.5529 11.1974 3.57216 11.2922C3.61533 11.5045 3.72702 11.6968 3.89013 11.8394C3.96296 11.9031 4.05222 11.9546 4.23078 12.0577L9.41462 15.0496C9.89668 15.3278 10.1377 15.4669 10.4023 15.467C10.667 15.467 10.9081 15.3281 11.3903 15.0501L17.7442 11.3875C17.9089 11.2926 17.9912 11.2451 18.053 11.2808C18.1147 11.3165 18.1147 11.4115 18.1147 11.6016V12.5786C18.1147 12.8574 18.1147 12.9967 18.0484 13.1115C17.9821 13.2262 17.8614 13.2958 17.6199 13.435L12.3792 16.456C11.4144 17.0121 10.932 17.2902 10.4025 17.2899C9.87293 17.2897 9.39078 17.0112 8.4265 16.4542L3.52339 13.6218C3.50782 13.6128 3.50004 13.6083 3.49278 13.6041C2.46472 13.0034 1.83037 11.9043 1.82442 10.7136C1.82438 10.7052 1.82438 10.6962 1.82438 10.6782V9.78145C1.82438 9.12412 2.17446 8.51659 2.74315 8.18696C3.24567 7.89566 3.86551 7.89508 4.36856 8.18545L8.4297 10.5294Z"
                    fill="currentColor"
                  />
                </svg>
              </AnimatedIcon>
            </a>

            <a href="https://x.com/dotbase_ai" target="_blank" rel="noopener noreferrer">
              <AnimatedIcon>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M15.2719 1.58659H18.0832L11.9415 8.60617L19.1667 18.1582H13.5094L9.0784 12.365L4.00833 18.1582H1.1954L7.76457 10.65L0.833374 1.58659H6.6343L10.6395 6.88187L15.2719 1.58659ZM14.2853 16.4756H15.843L5.78787 3.18087H4.11626L14.2853 16.4756Z"
                    fill="currentColor"
                  />
                </svg>
              </AnimatedIcon>
            </a>
          </div>
          <div className="text-white/30 text-xs">Copyright Reserved Dotbase @2025</div>
        </div>
      </div>
    </footer>
  );
}