import React from "react";
import "./Dropdown.scss";
// import "../../Styles/index.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}
      placement="bottomLeft"
      className={`starship-dropdown-list ${className}`}
      overlayClassName={`starship-v2 starship-dropdown-list-overlay ${overlayClassName} ${
        styleType === "secondary" && "secondary"
      } `}
      arrow={{ pointAtCenter: true }}
    >
      <a onClick={(e) => e.preventDefault()} className="starship-dropdown-text">
        {children} <span className="drop-down-link-arrow-icon">{icon}</span>
      </a>
    </Dropdown>
  );
};

export default StarshipDropdown;
