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

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';

export type Props = React.ComponentProps<typeof Button>;

const CompactCardOverlayButton: React.FC<Props> = (props) => {
  const { ...restProps } = props;
  return (
    <Button
      variant={ButtonVariant.Glass}
      size={ButtonSize.Mini}
      shape={ButtonShape.Rounded}
      aspectSquare={false}
      {...restProps}
      className={twMerge(
        'min-h-7 p-1.5 font-sans text-[11px] leading-none font-medium [&:hover]:bg-primary/10!',
        props.className
      )}
      contentClassName={twMerge(
        'flex-row items-center gap-1',
        props.contentClassName
      )}
      iconClassName={clsx('m-0 w-3.5 h-3.5', {
        'text-white': props.active !== true,
      })}
    />
  );
};

export default CompactCardOverlayButton;