import { useQuestion } from "@/api";
import Question from "@/components/question";
import Content from "@/components/ui/content";
import { Skeleton } from "@/components/ui/skeleton";
import { Stack, useLocalSearchParams } from "expo-router";

const QuestionScreen = () => {
  const { id: idParam } = useLocalSearchParams<{ id: string }>();
  const id = +idParam;
  const { data, isLoading } = useQuestion(id);

  return (
    <>
    <Stack.Screen options={{ title: `Question #${id}` }} />
    <Content>
      {isLoading && <Skeleton variant="rounded" className="h-32" />}
      { data && <Question question={data} /> }
    </Content>
    </>
  )
}

export default QuestionScreen;