import { HTMLAttributes, forwardRef } from 'react';
import { clsx } from 'clsx';

export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;

export type Props = {
  /**
   * Modify underlying element, `div` by default
   */
  as?: React.ElementType;
  /**
   * Set size of the circle in px, `48` by default
   */
  size?: ShapeSize;
  /**
   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)
   * as those can be dynamic a at certain viewport sizes
   */
  fixedSize?: boolean;
} & HTMLAttributes<HTMLDivElement>;

const Circle = forwardRef(function Circle(
  {
    as: Element = 'div',
    children,
    size = 48,
    fixedSize = false,
    className,
    style,
    ...props
  }: Props,
  ref,
) {
  return (
    <Element
      {...props}
      ref={ref}
      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
    >
      {children}
    </Element>
  );
});

export default Circle;
