import { useDispatch } from "react-redux"
import { setAddPopUp } from "@/redux/features/services-slice"
import { useTranslations } from "next-intl";

export default function AddNewButton()
{
    // setup needed varibles
    const dispatch = useDispatch()
    const t = useTranslations('services');
    // handle the open of the pop up
    function handleClickOpen()
    {
        dispatch(setAddPopUp(true))
    }
    // return the component ui
    return (
        <button onClick={handleClickOpen}
            className="
                bg-secondary-light dark:bg-primary text-primary-light dark:text-text
                fixed z-50 bottom-7 ltr:right-7 rtl:left-7
                w-auto h-18 p-3 rounded-md drop-shadow-lg 
                flex justify-between items-center gap-3
            ">
              <svg width="18" height="18" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fillRule="evenodd" clipRule="evenodd" d="M25 0.5C26.3807 0.5 27.5 1.61929 27.5 3L27.5 46C27.5 47.3807 26.3807 48.5 25 48.5C23.6193 48.5 22.5 47.3807 22.5 46L22.5 3C22.5 1.61929 23.6193 0.5 25 0.5Z" fill="currentColor"/>
                <path fillRule="evenodd" clipRule="evenodd" d="M48.5 25C48.5 26.3807 47.3807 27.5 46 27.5L3 27.5C1.61929 27.5 0.5 26.3807 0.5 25C0.5 23.6193 1.61929 22.5 3 22.5L46 22.5C47.3807 22.5 48.5 23.6193 48.5 25Z" fill="currentColor"/>
              </svg>
              <h3>{t('addNewService')}</h3>
        </button>
    )
}