import type { ShmSocialType } from '@/api/types';
import SocialIcon from '@/components/SocialIcon';
import { MobileListItem } from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import {
    getSocialDisplayLabel,
    type SocialNetworkType,
} from '@/utils/socialAuth';

type LinkedSocialNetworkRowProps = {
    type: SocialNetworkType;
    social?: ShmSocialType;
    isMobile?: boolean;
    onLink: () => void;
    onUnlink: () => void;
};

const LinkedSocialNetworkRow = ({
    type,
    social,
    isMobile,
    onLink,
    onUnlink,
}: LinkedSocialNetworkRowProps) => {
    const networkName = Lang.key('social_' + type);
    const icon = <SocialIcon type={type} mobile size={20} />;
    const isLinked = !!social;
    const secondaryText = isLinked && social
        ? Lang.key('social_account_linked').replace('{email}', getSocialDisplayLabel(social))
        : Lang.key('add_social_login');

    if (isMobile) {
        return (
            <MobileListItem
                title={networkName}
                footer={secondaryText}
                media={icon}
                link
                chevron={false}
                onClick={isLinked ? onUnlink : onLink}
            />
        );
    }

    return (
        <button
            type="button"
            className="flex w-full items-start gap-3 rounded-md px-2 py-3 text-left hover:bg-accent active:opacity-80"
            onClick={isLinked ? onUnlink : onLink}
        >
            <span
                style={{
                    opacity: isLinked ? 1 : 0.5,
                }}
                className="mt-0.5 shrink-0">{icon}</span>
            <span className="min-w-0 flex-1">
                <span className="block text-sm font-medium">{networkName}</span>
                <span className={`block text-sm text-muted-foreground`}>
                    {secondaryText}
                </span>
            </span>
        </button>
    );
};

export default LinkedSocialNetworkRow;
