import React from "react";

const Footer = () => {
  return (
    <footer className="bg-[#bb3523] text-white text-xs lg:text-sm py-4">
      <div className="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0 px-4">
        {/* Hak Cipta */}
        <div className="text-center md:text-left">Hak Cipta © 2023 Divisi Humas Polri. All Right Reserved.</div>

        {/* Menu Links */}
        <div className="flex flex-wrap justify-center items-center space-x-3">
          <a href="#" className="hover:underline">
            FeedBack
          </a>
          <span className="hidden md:inline-block">|</span>
          <a href="#" className="hover:underline">
            Hubungi Kami
          </a>
          <span className="hidden md:inline-block">|</span>
          <a href="#" className="hover:underline">
            FAQ
          </a>
          <span className="hidden md:inline-block">|</span>
          <a href="#" className="hover:underline">
            Privacy
          </a>
        </div>

        {/* Social Media Icons */}
        <div className="flex justify-center items-center space-x-3">
          <span className="text-sm">Follow Us:</span>
          <a href="#" aria-label="Facebook">
            <img src="/assets/facebook.svg" alt="Facebook" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="Instagram">
            <img src="/assets/instagram.svg" alt="Instagram" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="Twitter">
            <img src="/assets/twitter.svg" alt="Instagram" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="TikTok">
            <img src="/assets/tiktok.svg" alt="TikTok" className="w-5 h-5" />
          </a>
          <a href="#" aria-label="YouTube">
            <img src="/assets/youtube.svg" alt="YouTube" className="w-5 h-5" />
          </a>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
