import React, {
    ComponentProps,
    DetailedHTMLProps,
    HTMLAttributes,
} from "react";
import { twMerge } from "tailwind-merge";
import Link from "../layout/Link";

type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    variant?: "normal";
    href?: string;
    linkProps?: ComponentProps<typeof Link>;
    noHover?: boolean;
    elRef?: React.RefObject<HTMLDivElement>;
    linkRef?: React.RefObject<HTMLAnchorElement>;
};

/**
 * # General Card
 * @className twui-card
 * @className twui-card-link
 *
 * @info use the classname `nested-link` to prevent the card from being clickable when
 * a link (or the target element with this calss) inside the card is clicked.
 */
export default function Card({
    href,
    variant,
    linkProps,
    noHover,
    elRef,
    linkRef,
    ...props
}: Props) {
    const component = (
        <div
            ref={elRef}
            {...props}
            className={twMerge(
                "flex flex-row items-center p-4 rounded-default bg-white dark:bg-white/10",
                "border border-slate-200 dark:border-white/10 border-solid",
                noHover ? "" : "twui-card",
                props.className
            )}
        >
            {props.children}
        </div>
    );

    if (href) {
        return (
            <Link
                ref={linkRef}
                href={href}
                {...linkProps}
                className={twMerge(
                    "cursor-pointer",
                    "twui-card",
                    "twui-card-link",
                    linkProps?.className
                )}
            >
                {component}
            </Link>
        );
    }

    return component;
}