import { clsx } from 'clsx';
import Link from '../../link';
import { Typography } from '../propsValues/typography';
import ActionButton from '../../actionButton';
import { Priority } from '../propsValues/control';

export type ActionOptions = {
  'aria-label'?: string;
  href?: string;
  target?: string;
  text: React.ReactNode;
  onClick?: () => void;
};

type Props = {
  variant?: 'button' | 'action-button';
  action: ActionOptions;
  className?: string;
};

export function Action({ action, className, variant = 'button' }: Props) {
  if ('href' in action) {
    return (
      <Link
        href={action.href ?? ''}
        className={className}
        aria-label={action['aria-label']}
        target={action.target}
        type={Typography.LINK_LARGE}
        onClick={action.onClick}
      >
        {action.text}
      </Link>
    );
  }

  return variant === 'button' ? (
    <button
      type="button"
      aria-label={action['aria-label']}
      className={clsx('btn-unstyled np-text-link-large', className)}
      onClick={action.onClick}
    >
      {action.text}
    </button>
  ) : (
    <ActionButton
      aria-label={action['aria-label']}
      priority={Priority.SECONDARY}
      className={clsx(className)}
      onClick={action.onClick}
    >
      {action.text}
    </ActionButton>
  );
}
