export function EmptyState({
  title,
  className,
  container = "frosted",
  children,
}: {
  title?: string;
  className?: string;
  container?: "frosted" | "opaque" | "none" | "light";
  children?: React.ReactNode;
}) {
  const containerClass =
    container === "frosted"
      ? "frosted-container"
      : container === "opaque"
        ? "opaque-container"
        : container === "light"
          ? "light-container"
          : "";

  return (
    <div
      className={`w-full text-sm flex flex-col gap-1 italic text-tertiary text-center sm:p-4 p-3 ${containerClass} ${className ?? ""}`}
    >
      {title && <div className="text-base font-bold">{title}</div>}
      {children}
    </div>
  );
}