import cx from "classnames";
import React from "react";

import { Icon } from "../Icon";

interface ClickableControlProps {
  href?: string;
  className?: string;
  children?: React.ReactNode;
  [key: string]: any;
}

const CLASS_ROOT = "list__control";

export const ClickableControl: React.FC<ClickableControlProps> = ({
  href,
  className,
  children,
  ...other
}) => {
  const Tag = href ? "a" : "button";
  const type = Tag === "button" ? "button" : undefined;
  const classes = cx(CLASS_ROOT, className);

  return (
    <Tag className={classes} type={type} href={href} {...other}>
      {children}
      <Icon name="chevron-right" size="medium" className="list__indicator" />
    </Tag>
  );
};

ClickableControl.displayName = "ListItemClickableControl";