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> & { stacked?: boolean };

const CardOverlayButton: React.FC<Props> = (props) => {
  const { stacked = true, ...restProps } = props;
  return (
    <Button
      variant={ButtonVariant.Glass}
      size={ButtonSize.Mini}
      shape={ButtonShape.Rounded}
      aspectSquare={false}
      {...restProps}
      className={twMerge(
        clsx('p-1.5 font-sans text-[12px] leading-none font-semibold', {
          'min-h-12 px-3': stacked,
          'py-1': !stacked,
        }),
        props.className
      )}
      contentClassName={twMerge('flex-col gap-1', props.contentClassName)}
      iconClassName={clsx('m-0', {
        'text-white': props.active !== true,
      })}
    />
  );
};

export default CardOverlayButton;