import {
  chakra,
  forwardRef,
  ThemingProps,
  omitThemingProps,
  useStyleConfig,
  HTMLChakraProps,
} from '@chakra-ui/react';
import { __DEV__ } from '@chakra-ui/utils';

export interface I{{pascalCase name}}Props extends HTMLChakraProps<'div'>, ThemingProps {}

export const {{pascalCase name}} = forwardRef<I{{pascalCase name}}Props, 'div'>(function {{pascalCase name}}(
  props,
  ref,
) {
  const styles = useStyleConfig('{{pascalCase name}}', props);

  const {
    // extract components props here
    ...rest
  } = omitThemingProps(props);

  const componentStyles = {
    // place to add common styles
    ...styles,
  };

  return <chakra.div ref={ref} __css={componentStyles} {...rest} />;
});

if (__DEV__) {
  {{pascalCase name}}.displayName = '{{pascalCase name}}';
}