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

type Props = {
  fullWidth?: boolean;
  isActive?: boolean;
  icon?: React.ReactElement;
} & (
  | (React.ButtonHTMLAttributes<HTMLButtonElement> &
      Required<Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>>)
  | (React.HTMLAttributes<HTMLDivElement> & { onClick?: never })
);

const CardOverlayChip: React.FC<Props> = (props) => {
  const { children, fullWidth, icon, isActive, ...restProps } = props;

  const className = twMerge(
    clsx(
      [
        'flex-row items-center gap-1',
        'rounded-md px-2 py-1',
        'font-sans font-semibold text-[12px] leading-snug',
        'backdrop-blur-lg bg-clip-padding border border-border-primary',
        {
          'text-foreground-primary-on-dark bg-background-dark-overlay':
            !isActive,
          'text-foreground-primary-on-dark bg-background-light-overlay':
            isActive,
          'flex w-full': fullWidth,
          'inline-flex w-auto': !fullWidth,
          'hover:text-foreground-primary-on-light hover:bg-background-fog-dense':
            props.onClick && !isActive,
        },
      ],
      props.className
    )
  );

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

export default CardOverlayChip;