"use client";

import React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from "@/store/store";
import { MdKeyboardArrowDown } from "react-icons/md";
import LocalePath from '../../UiComponents/LocalePath';
import AppSkeleton from '@/components/UiComponents/Loader/AppSkeleton';

interface props {
  className?: string;
  withLink?: boolean;
 
}

const LocationText = ({className,withLink = true}:props) => {
  const {location_description,isLoading} = useSelector((state: RootState) => state.locationConfig)

  if(isLoading){
    return <AppSkeleton width='200px' height='20px' className='mt-3'/>
  }

  return (
  <div className='flex items-center gap-2 text-gray-500'>
      <p className={` ${className ? className : ""}`}>
        {location_description || <span>Location access is denied</span> }
      </p>
      {withLink && <LocalePath href='/account/addresses' className='underline'><MdKeyboardArrowDown/></LocalePath>}
  </div>
  );
};

export default LocationText;