import * as React from "react";

export interface TileProps {
  variant?: "default" | "flat" | "button";
  /** Trailing chevron affordance - only meaningful with variant="button". */
  chevron?: boolean;
  /** Required when variant="button". */
  onClick?: () => void;
  className?: string;
  children: React.ReactNode;
}

export function Tile({ variant = "default", chevron, onClick, className, children }: TileProps) {
  const classes = ["ads-tile"];
  if (variant === "flat") classes.push("ads-tile--flat");
  if (variant === "button") classes.push("ads-tile--button");
  if (className) classes.push(className);

  if (variant === "button") {
    return (
      <button type="button" className={classes.join(" ")} onClick={onClick}>
        <span className="ads-tile__content">{children}</span>
        {chevron && (
          <svg className="ads-tile__go" viewBox="0 0 6 10" aria-hidden>
            <path d="M1 1l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.4" />
          </svg>
        )}
      </button>
    );
  }

  return <div className={classes.join(" ")}>{children}</div>;
}
