import Link from 'next/link'
import { useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import { useTranslation } from '@/Utils/Hooks/useTranslate';

const AllSettingTab = ({ activeTab }) => {
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    return (
        <div className="box border border-lightGray rounded-2xl p-4 relative lg:mt-0 w-full col-span-12 lg:col-span-3 bg-white">
            <p className='text-xs text-gray font-medium leading-6'>{translations?.allSettings}</p>
            <ul className='flex flex-col divide-y divide-lightGray md:mt-5'>
                <li className='py-3 md:py-4'>
                    <Link href={`/${userDetails?.role}/profile/profile-settings`} className={`${activeTab == "profile-settings" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>🔧 {translations?.personalInformation}</Link>
                </li>
                {userDetails?.role == "influencer" &&
                    <>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/social-media-account`} className={`${activeTab == "social-media-account" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>📱 {translations?.socialMediaAccounts}</Link>
                        </li>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/bank-account`} className={`${activeTab == "bank-account" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>💳 {translations?.bankAccount}</Link>
                        </li>
                    </>
                }
                {userDetails?.role == "brand" &&
                    <>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/my-subscriptions`} className={`${activeTab == "subscription" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>✅ {translations?.subscriptions}</Link>
                        </li>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/saved-cards`} className={`${activeTab == "saved-cards" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>💳 {translations?.savedCards}</Link>
                        </li>
                    </>
                }
                <li className='py-3 md:py-4'>
                    <Link href={`/${userDetails?.role}/profile/password-security`} className={`${activeTab == "password" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>🔒 {translations?.passwordSecurity}</Link>
                </li>
                {userDetails?.role !== "admin" &&
                    <>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/faq`} className={`${activeTab == "faq" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>❓ {translations?.faqs}</Link>
                        </li>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/terms-condition`} className={`${activeTab == "terms-conditions" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>📄 {translations?.termsConditions}</Link>
                        </li>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/privacy-policy`} className={`${activeTab == "privacy-policy" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>🔐 {translations?.privacyPolicy}</Link>
                        </li>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/notification-preferences`} className={`${activeTab == "notification-preferences" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>🔔 {translations?.notificationPreferences}</Link>
                        </li>
                    </>
                }
                {userDetails?.role == "brand" &&
                    <>
                        <li className='py-3 md:py-4'>
                            <Link href={`/${userDetails?.role}/profile/permissions`} className={`${activeTab == "permissions" ? 'text-primary' : "text-black"} text-sm font-bold leading-6`}>🔑 {translations?.usageLimits}</Link>
                        </li>
                    </>
                }
            </ul>
        </div>
    )
}

export default AllSettingTab