import { ExpressionCard } from "../../components";
import { ExpressionDescription } from "../../components/ExpressionDescription";
import { useExpressionById, useQueryExpressionId } from "../../hooks";
import { ItemNotFoundError } from "../../model";
import { ErrorView } from "../ErrorView";

export function ExpressionCardView() {
  const expression_id = useQueryExpressionId();
  const expression = useExpressionById(expression_id);

  if (expression === undefined) return null; // LOADING
  if (expression === ItemNotFoundError)
    return <ErrorView message="Expression card not found" />;

  return (
    <div className="page-with-padding content-list scroll">
      <ExpressionCard
        prompt={expression.prompt}
        categories={[]}
        description={<ExpressionDescription expression={expression} />}
        show_description
      />
    </div>
  );
}