import { SocialButton } from "@/components/ui/social-button"

export function SocialButtonDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-wrap items-center gap-3">
        <SocialButton platform="apple" />
        <SocialButton platform="facebook" />
        <SocialButton platform="google" />
        <SocialButton platform="linkedin" />
        <SocialButton platform="twitter" />
        <SocialButton platform="whatsapp" />
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <SocialButton platform="apple" variant="outline" />
        <SocialButton platform="facebook" variant="outline" />
        <SocialButton platform="google" variant="outline" />
        <SocialButton platform="linkedin" variant="outline" />
        <SocialButton platform="twitter" variant="outline" />
        <SocialButton platform="whatsapp" variant="outline" />
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <SocialButton platform="apple" size="icon" />
        <SocialButton platform="facebook" size="icon" />
        <SocialButton platform="google" size="icon" />
        <SocialButton platform="linkedin" size="icon" />
        <SocialButton platform="twitter" size="icon" />
        <SocialButton platform="whatsapp" size="icon" />
      </div>

      <div dir="rtl" className="flex flex-wrap items-center gap-3">
        <SocialButton
          label="تسجيل الدخول باستخدام آبل"
          platform="apple"
          variant="outline"
        />
        <SocialButton
          label="تسجيل الدخول باستخدام فيسبوك"
          platform="facebook"
        />
        <SocialButton
          label="تسجيل الدخول باستخدام جوجل"
          platform="google"
          variant="outline"
        />
      </div>
    </div>
  )
}
