import cx from "classnames";
import type { AnchorHTMLAttributes, ReactNode } from "react";
import React from "react";

const CLASS_ROOT = "dropdown__item";

interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  className?: string;
  children?: ReactNode;
  disabled?: boolean;
  href?: string;
}

const DropdownItem: React.FC<DropdownItemProps> = ({
  className,
  children,
  disabled,
  href,
  ...other
}) => {
  const classes = cx(
    CLASS_ROOT,
    {
      disabled,
    },
    className,
  );

  return (
    <a
      tabIndex={disabled ? -1 : 0}
      href={href}
      className={classes}
      aria-disabled={disabled}
      {...other}
    >
      {children}
    </a>
  );
};

DropdownItem.displayName = "DropdownItem";

export { DropdownItem };