import { Link } from 'react-router-dom';
import Button from './button';
import { ReactNode } from 'react';

type NavLinkProps = {
  content?: string;
  to: string;
  color?: string;
  colorWeight?: number;
  children?: ReactNode;
  outline?: boolean;
  flat?: boolean;
  size?: 'zero' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
  textSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
  loading?: boolean;
  disabled?: boolean;
  replace?: boolean;
  className?: string;
  wrapperClassName?: string;
};

function NavLink({
  outline = false,
  flat = false,
  size = 'base',
  textSize = 'sm',
  color = 'blue',
  colorWeight = 500,
  loading = false,
  disabled = false,
  replace = false,
  to,
  content,
  children,
  className,
  wrapperClassName
}: NavLinkProps) {
  return (
    <Link to={to} replace={replace} className={wrapperClassName}>
      <Button
        color={color}
        colorWeight={colorWeight}
        outline={outline}
        flat={flat}
        size={size}
        textSize={textSize}
        loading={loading}
        disabled={disabled}
        className={className}
      >
        {content || children}
      </Button>
    </Link>
  );
}

export default NavLink;
