'use client';

import { RippleEffect } from '../ripple/ripple-effect';
import { CardActionAreaProps } from './card.types';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';

export const CardActionArea = forwardRef<HTMLDivElement, CardActionAreaProps>(
    ({ centralRipple = false, ripples = true, ...props }, ref) => {
        const [isActive, setIsActive] = useState<boolean>(false);
        const ripplesRef = useRef(null);
        const CardActionAreaEvents = useRippleEffect(
            ripplesRef,
            setIsActive,
            ripples,
        );
        const extraClassStyles =
            `m3 m3-card-action-area${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();

        return (
            <div
                {...props}
                {...CardActionAreaEvents}
                className={extraClassStyles}
                ref={ref}
            >
                <div className={'m3 m3-card-action-area-content'}>
                    {props.children}
                </div>
                <span className={'m3 m3-card-state-layer'} />
                {ripples && (
                    <RippleEffect
                        callback={setIsActive}
                        central={centralRipple}
                        ref={ripplesRef}
                    />
                )}
            </div>
        );
    },
);
