import { useState } from "react";
import { useGetVersions } from "../../hooks/useGetVersions";
import Logo from "/MAV.svg";
import VersionsModal from "./VersionsModal";

const Footer = () => {
  const { versionsQuery } = useGetVersions();
  const [isDevModalOpen, setDevModalOpen] = useState(false);

  const versionsData = versionsQuery?.data;

  const handleClick = () => {
    setDevModalOpen(true);
  };
  return (
    <>
      <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
        <img src={Logo} alt="Logo" width={100} height={100} onClick={handleClick} />
        <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
      </footer>
      <VersionsModal isDevModalOpen={isDevModalOpen} handleClose={() => setDevModalOpen(false)} data={versionsData} />
    </>
  );
};

export default Footer;