import Link from 'next/link';
import Image from 'next/image';
import { FaFacebookF, FaYoutube, FaAngleUp } from 'react-icons/fa';
import { FaFacebookMessenger } from 'react-icons/fa';
import { SiZalo } from 'react-icons/si';

const IconFixRight: React.FC = () => {
  return (
    <div className="global-fixed-right">
      <Link
        href="https://www.facebook.com/NGUYENCONGPC.VN"
        aria-label="Face Book"
        target="_blank"
        className="fix-face flex items-center justify-center"
      >
        <FaFacebookF size={20} />
      </Link>

      <Link
        href="https://www.youtube.com/c/NGUYENCONGPC"
        aria-label="Youtube"
        target="_blank"
        className="fix-youtube flex items-center justify-center"
      >
        <FaYoutube size={22} />
      </Link>

      <Link
        href="javascript:window.scrollTo({ top: 0, behavior: 'smooth' });"
        className="scroll-top-btn items-center justify-center"
        title="Di chuyển lên đầu trang!"
        style={{ display: 'none' }}
      >
        <FaAngleUp size={20} />
      </Link>

      <Link
        href="https://m.me/nguyencongpc.vn"
        target="_blank"
        className="messenger flex items-center"
      >
        <Image
          src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/facebook_messenger.png"
          width="40"
          height="40"
          alt="mes"
          className="lazy"
        />
        <div className="contact-info">
          <b className="block">Chat Facebook</b>
          <span>(8h-22h30)</span>
        </div>
      </Link>
      <Link
        href="https://zalo.me/nguyencongpc"
        target="_blank"
        className="flex items-center"
        style={{
          background: '#fff',
          bottom: '145px',
          width: '170px',
          padding: '10px',
          borderRadius: '15px',
          boxShadow: '0 1px 2px 1px #01010133',
          color: '#007bff',
          fontSize: '14px',
          height: '50px',
        }}
      >
        <Image
          src="https://nguyencongpc.vn/media/lib/24-01-2024/zalo.png"
          width="40"
          height="40"
          alt="mes"
          className="lazy"
          style={{ marginRight: '10px' }}
        />
        <div className="contact-info">
          <b className="block">Chat Zalo</b>
          <span>(8h-22h30)</span>
        </div>
      </Link>
    </div>
  );
};
export default IconFixRight;