"use client";
import React from "react";
import Style, { AddOn } from "./Card.styled";
export default function Card(props) {
    const scale = props?.scale || 1;
    const padding = props?.padding || 2;
    const gap = props?.gap || 1;
    const position = props?.addOn && props?.addOn?.position;
    const handleMouseOver = (e) => {
        if (typeof props?.onHover === "function")
            props?.onHover(e);
    };
    const handleClick = (e) => {
        if (typeof props?.onClick === "function")
            props?.onClick(e);
    };
    const handleChildHover = (e) => e.stopPropagation();
    return (<Style $scale={scale} $padding={padding} $gap={gap} $hover={typeof props?.onHover === "function" ? true : false} $event={typeof props?.onClick === "function" ? true : false} style={props?.style}>
            {props?.addOn && (<AddOn $top={position?.top || position?.bottom ? undefined : 1} $left={position?.left} $right={position?.right || position?.left ? undefined : 1} $bottom={position?.bottom} $fix={props?.addOn?.fix || false} style={props?.addOn?.style} onMouseOver={handleChildHover}>
                    {props?.addOn?.children || props?.addOn}
                </AddOn>)}
            <div onMouseOver={handleMouseOver} onClick={handleClick}>
                {props?.children}
            </div>
        </Style>);
}
//# sourceMappingURL=Card.jsx.map