import { observer } from "mobx-react";
// utils
import { cn } from "@buzzwaretech/utils";

type EmptyStateSize = "sm" | "lg";

type Props = {
  title: string;
  description?: string;
  assetPath?: string;
  size?: EmptyStateSize;
};

const sizeConfig = {
  sm: {
    container: "size-24",
    dimensions: 78,
  },
  lg: {
    container: "size-28",
    dimensions: 96,
  },
} as const;

const getTitleClassName = (hasDescription: boolean) =>
  cn("font-medium whitespace-pre-line", {
    "text-13 text-placeholder": !hasDescription,
    "text-16 text-tertiary": hasDescription,
  });

export const SimpleEmptyState = observer(function SimpleEmptyState(
  props: Props,
) {
  const { title, description, size = "sm", assetPath } = props;

  return (
    <div className="flex flex-col items-center gap-2.5 text-center">
      {assetPath && (
        <div className={sizeConfig[size].container}>
          <img
            src={assetPath}
            alt={title}
            className="h-full w-full object-contain"
          />
        </div>
      )}

      <h3 className={getTitleClassName(!!description)}>{title}</h3>

      {description && (
        <p className="text-14 font-medium whitespace-pre-line text-placeholder">
          {description}
        </p>
      )}
    </div>
  );
});