import React from "react";
import "./Dropdown.scss";
import { Dropdown, DropDownProps } from "antd";

interface Props extends DropDownProps {
  children: React.ReactChild;
  icon?: React.ReactNode;
  styleType?: "primary" | "secondary";
}
const StarshipDropdown = (props: Props) => {
  const {
    className,
    children,
    overlayClassName,
    icon,
    styleType = "primary",
    ...restProps
  } = props;
  return (
    <Dropdown
      {...restProps}
      className={`starship-dropdown-list ${className}`}
      overlayClassName={`starship-dropdown-list-overlay ${overlayClassName} ${
        styleType === "secondary" && "secondary"
      } `}
    >
      <a onClick={(e) => e.preventDefault()} className="starship-dropdown-text">
        {children} <span className="arrow-icon">{icon}</span>
      </a>
    </Dropdown>
  );
};

export default StarshipDropdown;