import React, { ReactNode } from 'react';
import { useAppSelector } from '../stores/hooks';

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 navBarItemLabelStyle = useAppSelector(
    (state) => state.style.navBarItemLabelStyle,
  );
  const navBarItemLabelHoverStyle = useAppSelector(
    (state) => state.style.navBarItemLabelHoverStyle,
  );

  const classBase =
    'items-center cursor-pointer dark:text-white dark:hover:text-slate-400';
  const classAddon = `${display} ${navBarItemLabelStyle} ${navBarItemLabelHoverStyle} ${
    useMargin ? 'my-2 mx-3' : 'py-2 px-3'
  }`;

  return (
    <div className={`${classBase} ${classAddon}`} onClick={onClick}>
      {children}
    </div>
  );
}