import { MapIcon } from '@/assets/svgs/Icons'
import SelectAddressesModal from '@/components/pagesComponents/checkout/SelectAddressesModal'
import { openAddressModal } from '@/store/address'
import { AppDispatch } from '@/store/store'
import { useTranslations } from 'next-intl'
import React from 'react'
import { FiPlus } from 'react-icons/fi'
import { useDispatch } from 'react-redux'

const EmptyAddresses = ({className,withOutBtn}:{className?:string;withOutBtn?:boolean}) => {
    const t = useTranslations();
    const dispatch = useDispatch<AppDispatch>()
  return (
    <div className={`flex-center-content h-[600px] ${className?className : ""}`}>
        <div>
        {/* Location Icon */}
        <div className="flex justify-center mb-4">
            <div className="bg-red-100 p-4 rounded-full">
            <MapIcon/>
            </div>
        </div>
        <h2 className="lg:text-2xl text-xl  font-bold leading-8 mb-2 !text-center">
            {t("address.noAddresses")}
        </h2>
        <p className=" mx-auto  text-gray-700 text-center text-lg font-medium leading-6 text- mb-6">
            {t("address.addAddresses")}
        </p>
        {!withOutBtn && (
            <button 
                onClick={()=>dispatch(openAddressModal({step:1}))} 
                className="app-btn mx-auto !flex"
            >
                <FiPlus size={20} />
                {t("buttons.addNewAddress")}
            </button>
        )}
        </div>
        <SelectAddressesModal />
    </div>
  )
}

export default EmptyAddresses