import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { FaFacebookF, FaGoogle } from "react-icons/fa";

const SocialMediaPage = async () => {
  return (
    <div className="space-y-4">
      <SiteBreadcrumb />
      <div className="bg-white rounded-md p-4 shadow-lg border">
        <h2 className="text-lg font-semibold">Social Media</h2>
      </div>

      <div className="bg-white rounded-md p-6 shadow-lg border">
        <p className="text-base mb-6">Koneksi Social Media</p>
        <div className="flex flex-col md:flex-row justify-center items-center gap-10">
          <div className="flex flex-col items-center">
            <Button className="bg-[#3b5998] hover:bg-[#2d4373] text-white px-6 py-2 rounded-md flex items-center gap-2">
              <FaFacebookF className="text-lg" />
              Login With Facebook
            </Button>
            <p className="mt-2 text-sm text-gray-700">Tidak Terhubung</p>
          </div>

          <div className="flex flex-col items-center">
            <Button className="bg-[#ea4335] hover:bg-[#c73a2a] text-white px-6 py-2 rounded-md flex items-center gap-2">
              <FaGoogle className="text-lg" />
              Login With Google
            </Button>
            <p className="mt-2 text-sm text-gray-700">Tidak Terhubung</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SocialMediaPage;