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;
    href: string;
    status?: SectionStatus;
};

// Settings hub card. Each card represents one setup-able section (Branding,
// Clinics, Doctors, Team, Telephony, AI, Widget, Rules) and links to its
// dedicated page. The status badge mirrors the wizard's setup-state so an
// admin can see at a glance which sections still need attention.
export const SectionCard = ({
    title,
    description,
    icon,
    iconColor = 'text-brand-primary',
    href,
    status = 'unknown',
}: SectionCardProps) => {
    return (
        <Link
            to={href}
            className="group block rounded-xl border border-secondary bg-primary p-5 shadow-xs transition hover:border-brand hover:shadow-md"
        >
            <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', iconColor)} />
                    </div>
                    <div className="min-w-0">
                        <h3 className="text-sm font-semibold text-primary">{title}</h3>
                        <p className="mt-1 text-xs text-tertiary">{description}</p>
                    </div>
                </div>
                <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>
            )}
        </Link>
    );
};