'use client'

import { FcGoogle } from 'react-icons/fc'
import { FaFacebook, FaGithub } from 'react-icons/fa'
//import { RiTwitterXLine } from 'react-icons/ri'

import { Button } from '@/components/ui/button'
import { SignInProvider } from '@/actions/login'

export const Social = () => {

  return (
    <div className="flex items-center w-full gap-x-2">
      <Button size="lg" className="w-full" variant="outline"
              onClick={() => SignInProvider('google')}>
        <FcGoogle className="w-5 h-5"/>
      </Button>
      <Button size="lg" className="w-full" variant="outline"
              onClick={() => SignInProvider('github')}>
        <FaGithub className="w-5 h-5"/>
      </Button>
      {/*<Button size="lg" className="w-full" variant="outline" onClick={() => {}}>
        <RiTwitterXLine className="w-5 h-5"/>
      </Button>*/}
      {/*<Button size="lg" className="w-full" variant="outline"
              onClick={() => SignInProvider('facebook')}>
        <FaFacebook className="w-5 h-5" style={{ color: '#1877F2' }}/>
      </Button>*/}
    </div>
  )
}