import * as React from "react";

export interface LeafRowProps {
  title: React.ReactNode;
  subTitle?: React.ReactNode;
  value?: React.ReactNode;
  subValue?: React.ReactNode;
  onClick?: () => void;
  className?: string;
}

export function LeafRow({ title, subTitle, value, subValue, onClick, className }: LeafRowProps) {
  const classes = ["ads-leaf"];
  if (className) classes.push(className);
  const Tag: React.ElementType = onClick ? "button" : "div";
  return (
    <Tag type={onClick ? "button" : undefined} className={classes.join(" ")} onClick={onClick}>
      <span className="ads-leaf__k">
        {title}
        {subTitle !== undefined && <small>{subTitle}</small>}
      </span>
      <span className="ads-leaf__v">
        {value}
        {subValue !== undefined && <small>{subValue}</small>}
      </span>
      <svg className="ads-chev" viewBox="0 0 6 10" aria-hidden>
        <path d="M1 1l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.4" />
      </svg>
    </Tag>
  );
}
