import clsx from 'clsx';
import React from 'react';
import { twMerge } from 'tailwind-merge';

export type Props = {
  active?: boolean;
} & (
  | React.HTMLAttributes<HTMLDivElement>
  | React.ButtonHTMLAttributes<HTMLButtonElement>
);

const IndicatorDot: React.FC<Props> = (props) => {
  const { active, children, ...restProps } = props;

  const className = twMerge(
    clsx(
      'relative rounded-full overflow-hidden p-2 text-foreground-primary -outline-offset-[.25rem]',
      'before:absolute before:inset-1 before:rounded-full before:transition before:duration-150',
      'after:absolute after:inset-1 after:rounded-full after:transition after:duration-150',
      'before:bg-current before:scale-0',
      'after:border after:border-current after:opacity-75',
      {
        'before:scale-100 after:opacity-0': active,
        'inline-block w-2 h-2': !children,
        'inline-flex items-center justify-center p-1': !!children,
        'min-w-6 text-xs font-bold font-sans': !!children,
        'cursor-pointer': !!props.onClick,
      }
    ),
    props.className
  );

  return restProps.onClick ? (
    <button
      type='button'
      {...(restProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
      className={className}
    >
      {children}
    </button>
  ) : (
    <div
      {...(restProps as React.HTMLAttributes<HTMLDivElement>)}
      className={className}
    >
      {children}
    </div>
  );
};

export default IndicatorDot;