import { type ReactNode } from 'react';

interface BaseProps {
    children: ReactNode;
    elevated?: boolean;
    className?: string;
}

interface StaticCardProps extends BaseProps {
    onPress?: undefined;
}

interface PressableCardProps extends BaseProps {
    /** When provided the card renders a real <button> — keyboard-operable,
     *  unlike a <div onClick>. An accessible name is required. */
    onPress: () => void;
    'aria-label': string;
}

type CardProps = StaticCardProps | PressableCardProps;

/**
 * Surface container. Static by default; pass `onPress` to make the whole card
 * an accessible, keyboard-operable button (fixes the clickable-<div> a11y debt).
 */
export function Card(props: CardProps) {
    const { children, elevated, className = '' } = props;
    const base = `rounded-lg border border-border ${elevated ? 'bg-elevated' : 'bg-surface'} p-4 ${className}`;

    if (props.onPress) {
        return (
            <button
                type="button"
                onClick={props.onPress}
                aria-label={props['aria-label']}
                className={`${base} text-left transition-colors hover:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`}
            >
                {children}
            </button>
        );
    }
    return <div className={base}>{children}</div>;
}