import { SocialButton } from "@/components/base/buttons/social-button";

export const FacebookSocialButtons = () => {
    return (
        <div className="flex flex-col gap-4">
            <div className="flex flex-col items-start gap-8 md:flex-row">
                <SocialButton social="facebook" theme="brand">
                    Sign in with Facebook
                </SocialButton>
                <SocialButton social="facebook" theme="brand" aria-label="Sign in with Facebook" />
            </div>
            <div className="flex flex-col items-start gap-8 md:flex-row">
                <SocialButton social="facebook" theme="color">
                    Sign in with Facebook
                </SocialButton>
                <SocialButton social="facebook" theme="color" aria-label="Sign in with Facebook" />
            </div>
            <div className="flex flex-col items-start gap-8 md:flex-row">
                <SocialButton social="facebook" theme="gray">
                    Sign in with Facebook
                </SocialButton>
                <SocialButton social="facebook" theme="gray" aria-label="Sign in with Facebook" />
            </div>
        </div>
    );
};
Social button components
