"use client";
import React, { useCallback } from "react";
import { cardClickableMixin, cardMixin } from "../styles";
import { cls } from "../util";

type CardProps = {
    children: React.ReactNode;
    style?: React.CSSProperties;
    onClick?: (e?: React.MouseEvent) => void;
    className?: string;
};

const Card = React.forwardRef<HTMLDivElement, CardProps>(({
    children,
    className,
    onClick,
    style,
    ...props
}, ref) => {
    const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
        if (e.key === "Enter" || e.key === " ") {
            onClick?.();
        }
    }, [onClick]);

    return (
        <div
            ref={ref}
            onKeyPress={onKeyPress}
            role={onClick ? "button" : undefined}
            tabIndex={onClick ? 0 : undefined}
            onClick={onClick}
            className={cls(cardMixin, onClick && cardClickableMixin, className)}
            style={style}
            {...props}>
            {children}
        </div>
    );
});

export { Card };