import React, { ReactNode } from 'react';

type Props = {
  display?: string;
  useMargin?: boolean;
  children?: ReactNode;
  onClick?: (e: React.MouseEvent) => void;
};

export default function NavBarItemPlain({
  display = 'flex',
  useMargin = false,
  onClick,
  children,
}: Props) {
  const spacing = useMargin ? 'mx-3' : 'px-3';

  return (
    <div
      className={`${display} ${spacing} h-10 cursor-pointer items-center rounded-xl text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-950 dark:text-white dark:hover:bg-dark-700 dark:hover:text-slate-100`}
      onClick={onClick}
    >
      {children}
    </div>
  );
}
