import React from "react";
import { useNavigate } from "react-router-dom";

const Footer = () => {
  const navigate = useNavigate();
  return (
    <footer className="bg-gray-900 text-white mt-auto">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 className="text-xl font-bold mb-4">System Management Portal</h3>
            <p className="text-gray-400">시스템 관리 포탈입니다.</p>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4">Categories</h4>
            <ul className="space-y-2">
              <li>
                <button
                  onClick={() => navigate("/post/developer")}
                  className="text-gray-400 hover:text-white"
                >
                  Developer
                </button>
              </li>
              <li>
                <button
                  onClick={() => navigate("/post/systemengineer")}
                  className="text-gray-400 hover:text-white"
                >
                  System Engineer
                </button>
              </li>
              <li>
                <button
                  onClick={() => navigate("/post/etc")}
                  className="text-gray-400 hover:text-white"
                >
                  Other Posts
                </button>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4">Contact</h4>
            <ul className="space-y-2 text-gray-400">
              <li className="flex items-center">
                <i className="fas fa-envelope mr-2"></i> icurfer@gmail.com
              </li>
              <li className="flex items-center">
                <i className="fas fa-phone mr-2"></i> -
              </li>
              <li className="flex items-center">
                <i className="fab fa-youtube mr-2 text-red-600"></i>
                <a
                  href="https://youtube.com/@icurfer"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center text-red-600 hover:underline"
                >icurfer</a>
              </li>
              {/* <li className="flex items-center"><i className="fas fa-map-marker-alt mr-2"></i> -</li> */}
            </ul>
          </div>
        </div>
        <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
          <p> Copyright &copy; icurfer 2025</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;