'use client';

import React, { type ReactNode } from 'react';
import { Typography } from 'antd';
import { ChevronRight } from 'lucide-react';
import { ICON_SIZE_SM } from '@/components/icons';
import styles from './MobileDetailRow.module.scss';

const { Text } = Typography;

export type MobileDetailRowProps = {
    label: ReactNode;
    value?: ReactNode;
    /** Quando definido, a linha fica ativável (navegação / picker). */
    onClick?: () => void;
    showChevron?: boolean;
    className?: string;
    'data-testid'?: string;
};

/**
 * Linha label/valor para detalhe mobile (MDS).
 * Ex.: Responsável · João Silva ›
 */
export function MobileDetailRow({
    label,
    value,
    onClick,
    showChevron,
    className = '',
    'data-testid': dataTestId,
}: MobileDetailRowProps) {
    const interactive = typeof onClick === 'function';
    const chevron = showChevron ?? interactive;

    const content = (
        <>
            <div className={styles.labelCol}>
                <Text type="secondary" className={styles.label}>
                    {label}
                </Text>
                {value != null && value !== '' ? (
                    <div className={styles.value}>{value}</div>
                ) : null}
            </div>
            {chevron ? (
                <ChevronRight
                    size={ICON_SIZE_SM}
                    className={styles.chevron}
                    aria-hidden
                />
            ) : null}
        </>
    );

    if (interactive) {
        return (
            <button
                type="button"
                className={`${styles.row} ${styles.rowInteractive} ${className}`.trim()}
                onClick={onClick}
                data-testid={dataTestId}
            >
                {content}
            </button>
        );
    }

    return (
        <div className={`${styles.row} ${className}`.trim()} data-testid={dataTestId}>
            {content}
        </div>
    );
}