import { ApplyThemeProperty, useTheme } from '@/theme/ThemeContext';
import { CSSProperties, ReactNode, useState } from 'react';

export type DivProps = {
    children?: ReactNode;
    onClick?: () => void;
    style?: CSSProperties;
    _hover?: CSSProperties;
    componentType?: ApplyThemeProperty['componentType'];
    shape?: ApplyThemeProperty['shape'];
    palette?: ApplyThemeProperty['palette'];
};

export const Div = ({ children, onClick, style, _hover, ...themeToApply }: DivProps) => {
    const { applyTheme } = useTheme();
    const [hover, setHover] = useState(false);
    const hoverTheme = hover ? _hover : {};
    const themedStyle = style ? applyTheme({ ...style, ...hoverTheme }, themeToApply) : undefined;
    return (
        <div
            onMouseEnter={() => {
                setHover(true);
            }}
            onMouseLeave={() => {
                setHover(false);
            }}
            onClick={onClick}
            style={themedStyle}
        >
            {children}
        </div>
    );
};