'use client';

import { useMemo, type ReactNode } from 'react';
import { Typography } from 'antd';
import { useIsMobile } from '@/hooks/useIsMobile';

const HINT_STYLE = { fontSize: 12, marginTop: 10, display: 'block', paddingRight: 8 } as const;

/** Hint de interação em cards mobile — visível só em ≤768px (inverso do scroll hint). */
export const LISTING_MOBILE_INTERACTION_HINT_DEFAULT =
    'Toque num card para abrir opções.';

/**
 * Hint de interação para listagens com cards dedicados em mobile (ex.: logs, chamados).
 * Omitido em tablet/desktop, onde a tabela permanece visível.
 */
export function useListingMobileInteractionHint(message?: ReactNode): ReactNode | undefined {
    const isMobile = useIsMobile();

    return useMemo(() => {
        if (!isMobile || message == null || message === '') {
            return undefined;
        }
        if (typeof message === 'string') {
            return (
                <Typography.Text type="secondary" style={HINT_STYLE}>
                    {message}
                </Typography.Text>
            );
        }
        return message;
    }, [isMobile, message]);
}