import index from './index.module.css';
import { RtGridChildContext, useGridChild } from '@dpa/react-grid';
import { useRtBaseProps } from '@dpa/react-hoc';
import { MouseEventHandler, ReactNode, useId } from 'react';
import classnames from 'classnames/bind';

const cn = classnames.bind(index);

export function TestGridButton(props: {
  radius?: 'primary' | 'secondary';
  color?: 'red' | 'black';
  size?: 'xs' | 'sm' | 'md' | 'lg';
  children?: ReactNode;
  onClick?: MouseEventHandler;
}) {
  const { radius = 'primary', size = 'lg', color = 'black', children } = props;
  const id = useId();
  const { ...baseProps } = useRtBaseProps(props, '0.2.2');
  const { gridChildClassname, gridAttributes } = useGridChild({
    size,
    radius,
  });

  return (
    <div
      className={cn(
        'test-grid-button',
        `test-grid-button--${color}`,
        gridChildClassname
      )}
      {...gridAttributes}
      {...baseProps}
      id={id}
      onClick={props.onClick}
    >
      <RtGridChildContext.Provider value={null}>
        {children}
      </RtGridChildContext.Provider>
    </div>
  );
}