// src/components/layout-and-navigation/Tile.tsx
import clsx from "clsx";
import { Check } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
var Tile = ({
  title,
  description,
  onClick,
  isSelected = false,
  isDisabled = false,
  prefix,
  suffix,
  normalClassName = "hover:bg-primary/40 cursor-pointer",
  selectedClassName = " bg-primary/20",
  disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
  className
}) => {
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: clsx(
        "row gap-x-2 w-full items-center",
        {
          [normalClassName]: !!onClick && !isDisabled,
          [selectedClassName]: isSelected && !isDisabled,
          [disabledClassName]: isDisabled
        },
        className
      ),
      onClick: isDisabled ? void 0 : onClick,
      children: [
        prefix,
        /* @__PURE__ */ jsxs("div", { className: "col gap-y-0 w-full", children: [
          /* @__PURE__ */ jsx("h4", { className: clsx(title.className ?? "textstyle-title-normal"), children: title.value }),
          !!description && /* @__PURE__ */ jsx("span", { className: clsx(description.className ?? "textstyle-description"), children: description.value })
        ] }),
        suffix ?? (isSelected ? /* @__PURE__ */ jsx(Check, { size: 24 }) : void 0)
      ]
    }
  );
};
export {
  Tile
};
//# sourceMappingURL=Tile.mjs.map