import { ActiveHookProps, Link, LinkProps, useActive } from '@curi/react-dom';
import React, { FC, ReactNode } from 'react';

export type ActiveLinkProps = ActiveHookProps &
  LinkProps & {
    className?: string;
    children: ReactNode;
  };

export const ActiveLink:FC<ActiveLinkProps> = ({ name, params, partial, className = "", ...rest }) => {
  const active = useActive({ name, params, partial });
  return (
    <Link
      name={name}
      params={params}
      {...rest}
      className={active ? `${className} active` : className}
    />
  );
};