import React from "react";
import {
  FaFacebookF,
  FaTwitter,
  FaPinterestP,
  FaLinkedinIn,
} from "react-icons/fa";

const TopBar = () => {
  return (
    <div
      className="p-5 xl:h-10 xl:flex justify-between lg:items-center  xl:px-10 "
      style={{ backgroundColor: "#0f172a" }}
    >
      <div className="relative z-10 flex lg:justify-center justify-start  xl:py-2 ">
        <div className="flex-shrink-0 xl:flex items-center   xl:space-y-0 ">
          <ul className="text-sm text-slate-50 xl:flex justify-center xl:justify-start items-center xl:space-x-1  xl:space-y-0">
            <li className="flex xl:inline justify-center">
              <a className="text-white hover:underline">P: 02 7228 6224</a>
            </li>
          </ul>
        </div>
      </div>

      <div className="xl:relative mt-2 lg:mt-0 xl:px-0 xl:z-10 xl:ml-4 grid grid-cols-1 xl:flex items-center justify-center  xl:space-y-0 xl:space-x-5">
        <li className="flex xl:inline lg:justify-center justify-start">
          <a
            className="text-white hover:underline"
            href="https://www.graduationevent.com.au"
          >
            W: graduationevent.com.au
          </a>
        </li>
      </div>
    </div>
  );
};

export default TopBar;