helix-engage/src/components/setup/section-card.tsx

import { Link } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight, faCircleCheck, faCircleExclamation } from '@fortawesome/pro-duotone-svg-icons';
import { cx } from '@/utils/cx';

type SectionStatus = 'complete' | 'incomplete' | 'unknown';

type SectionCardProps = {
    title: string;
    description: string;
    icon: any;
    iconColor?: string;
    // Either navigate (href) OR intercept the click (onClick). When onClick
    // is provided, href is ignored and the card renders as a button. Used
    // while self-serve setup is disabled — all clicks go through a
    // "contact product team" modal in settings.tsx.
    href?: string;
    onClick?: () => void;
    status?: SectionStatus;
    disabled?: boolean;
};

// Settings hub card. Each card represents one setup-able section (Branding,
// Clinics, Doctors, Team, Telephony, AI, Widget, Rules) and either links to
// its dedicated page or triggers a parent-owned callback.
export const SectionCard = ({
    title,
    description,
    icon,
    iconColor = 'text-brand-primary',
    href,
    onClick,
    status = 'unknown',
    disabled = false,
}: SectionCardProps) => {
    const className = cx(
        'group block w-full text-left rounded-xl border border-secondary p-5 shadow-xs transition',
        disabled
            ? 'cursor-not-allowed opacity-50 bg-disabled_subtle'
            : 'bg-primary hover:border-brand hover:shadow-md',
    );
    const body = (
        <>
            <div className="flex items-start justify-between gap-4">
                <div className="flex items-start gap-4">
                    <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-secondary">
                        <FontAwesomeIcon icon={icon} className={cx('size-5', disabled ? 'text-fg-disabled' : iconColor)} />
                    </div>
                    <div className="min-w-0">
                        <h3 className={cx('text-sm font-semibold', disabled ? 'text-disabled' : 'text-primary')}>{title}</h3>
                        <p className="mt-1 text-xs text-tertiary">{description}</p>
                    </div>
                </div>
                {!disabled && (
                    <FontAwesomeIcon
                        icon={faArrowRight}
                        className="size-4 shrink-0 text-quaternary transition group-hover:translate-x-0.5 group-hover:text-brand-primary"
                    />
                )}
            </div>

            {status !== 'unknown' && (
                <div className="mt-4 flex items-center gap-2 border-t border-secondary pt-3">
                    {status === 'complete' ? (
                        <span className="inline-flex items-center gap-1.5 text-xs font-medium text-success-primary">
                            <FontAwesomeIcon icon={faCircleCheck} className="size-3.5" />
                            Configured
                        </span>
                    ) : (
                        <span className="inline-flex items-center gap-1.5 text-xs font-medium text-warning-primary">
                            <FontAwesomeIcon icon={faCircleExclamation} className="size-3.5" />
                            Setup needed
                        </span>
                    )}
                </div>
            )}
        </>
    );

    if (disabled) {
        return (
            <div className={className}>
                {body}
            </div>
        );
    }
    if (onClick) {
        return (
            <button type="button" onClick={onClick} className={className}>
                {body}
            </button>
        );
    }
    return (
        <Link to={href ?? '#'} className={className}>
            {body}
        </Link>
    );
};