import { Text, UnstyledButton } from "@mantine/core";
import { Icon } from "@phosphor-icons/react";
import classes from "./nav-tile.module.css";

interface NavTileProps {
  label: string;
  Icon: Icon;
  onClick?: () => void;
  disabled?: boolean;
}

/** A single square-ish nav tile with icon-over-label and press feedback. */
export const NavTile = ({ label, Icon, onClick, disabled }: NavTileProps) => (
  <UnstyledButton
    className={`${classes.tile} flxn-tile`}
    onClick={onClick}
    disabled={disabled}
  >
    <span className={`${classes.icon} flxn-tile-icon`}>
      <Icon size={22} weight="bold" />
    </span>
    <Text size="xs" fw={600} lineClamp={2} lh={1.2}>
      {label}
    </Text>
  </UnstyledButton>
);

export default NavTile;