import { GlobeIcon } from 'lucide-react';

import {
    DropdownMenuItem,
} from '@/components/ui/dropdown-menu';
import {
    linkedSocialNetworksDialogRef,
} from '@/componentsRoot/LinkedSocialNetworksDialog/LinkedSocialNetworksDialog';
import { MenubarItem } from '@/components/ui/menubar';
import { MobileListItem } from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import { useAppConfig } from '@/stores/appConfig';

type ProfileSocialItemsProps = {
    variant: 'dropdown' | 'menubar' | 'mobile';
    onMobileAction?: () => void;
};

const ProfileSocialItems = ({ variant, onMobileAction }: ProfileSocialItemsProps) => {
    const { auth } = useAppConfig();

    if (!auth?.socialLogin) {
        return null;
    }

    const openDialog = () => {
        onMobileAction?.();
        linkedSocialNetworksDialogRef.current?.open();
    };

    if (variant === 'menubar') {
        return (
            <MenubarItem onClick={openDialog}>
                <GlobeIcon /> {Lang.key('social_login')}
            </MenubarItem>
        );
    }

    if (variant === 'mobile') {
        return (
            <MobileListItem
                title={Lang.key('social_login')}
                media={<GlobeIcon size={20} />}
                link
                chevron={false}
                onClick={openDialog}
            />
        );
    }

    return (
        <DropdownMenuItem onClick={openDialog} tooltip={Lang.key('add_social_login_for_faster_login')}>
            <GlobeIcon /> {Lang.key('social_login')}
        </DropdownMenuItem>
    );
};

export default ProfileSocialItems;
