"use client"
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { app } from '@/config/FirebaseConfig'
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import { doc, getFirestore, setDoc } from 'firebase/firestore'
import { useRouter } from 'next/navigation'
import React, { useState } from 'react'
import { toast } from 'sonner'

const CreateBusiness = () => {
    const [businessName, setBusinessName] = useState();
    const db = getFirestore(app);
    const {user} = useKindeBrowserClient();
    const router = useRouter();
    const onCreateBusiness = async () => {
        await setDoc(doc(db, 'Business', user.email), {
            businessName: businessName,
            email: user.email,
            userName: user.given_name+" " + user.family_name
        }).then(res => {
            console.log("Data is saved")
            toast('You have successful created your name!')
            router.replace('/dashboard');
        })
    }

  return (
    <div className='my-20 flex flex-col items-center gap-10 px-5'>
        <p className='text-3xl uppercase font-semibold font-outline-2 text-white tracking-wide'>Schedule.Me</p>
        <div className='flex flex-col items-center'>
            <p className='text-lg font-semibold'>What would you like to be called?</p>
            <p className='text-sm text-[gray] mb-10'>You can change this later</p>
            <div className='w-full'>
                <label className='font-semibold text-[#31363F]'>Name:</label>
                <Input onChange={(ev) => setBusinessName(ev.target.value)} placeholder="Your organization/team/etc. name" className='mt-1 text-sm'/>
            </div>
            <Button onClick={onCreateBusiness} disabled={!businessName} className="w-full mt-[30px]">Create</Button>
        </div>
    </div>
  )
}

export default CreateBusiness