import React from "react";
import classNames from "classnames";
import styles from "./LinkTile.module.css";
import { Icon } from "@arc-ui/components/Icon";
import { BtIconArrowAltRight } from "@arc-ui/icons/BtIconArrowAltRight";

export const LinkTile: React.FC<LinkTileProps> = ({
  text,
  href,
  showIcon = true,
  tone = "brand",
  className,
  ...props
}) => {
  const Component = href ? "a" : "div";
  const linkProps = href ? { href } : {};

  return (
    <Component
      className={classNames(
        styles["link-tile"],
        {
          [styles["link-tile--neutral"]]: tone === "neutral",
        },
        className,
      )}
      {...linkProps}
      {...(props as React.HTMLAttributes<HTMLElement>)}
    >
      {text && (
        <div className={styles["link-tile-content"]}>
          <span className={styles["link-tile-text"]}>{text}</span>
          {showIcon && (
            <span className={styles["link-tile-icon"]}>
              <Icon icon={BtIconArrowAltRight} size={32} />
            </span>
          )}
        </div>
      )}
    </Component>
  );
};

export interface LinkTileProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Display text for the tile */
  text?: string;
  /** URL the tile navigates to. Renders as an anchor tag when provided */
  href?: string;
  /** Whether to show the arrow icon. Defaults to true */
  showIcon?: boolean;
  /** Visual tone variant. Defaults to brand */
  tone?: "brand" | "neutral";
}