import React from 'react';
import { twMerge } from 'tailwind-merge';

import Link from './Link';

export type Props = Omit<React.ComponentProps<typeof Link>, 'href'> &
  (
    | (Pick<React.ComponentProps<typeof Link>, 'href'> & {
        handle?: never;
      })
    | { href?: never; handle: string }
  );

const ProfileLink: React.FC<Props> = (props) => {
  const { children, handle, href = `/@${handle}`, ...restProps } = props;
  return (
    <Link
      href={href}
      {...restProps}
      className={twMerge('hover:underline', props.className)}
    >
      {children}
    </Link>
  );
};

export default ProfileLink;