import { QuestionResponse } from "@/api/types";
import capitalizeFirst from "@/utils/capitalize-first";
import { FontAwesome5 } from "@expo/vector-icons";
import { Pressable, StyleSheet, View } from "react-native";
import { Divider } from "./ui/divider";
import Panel from "./ui/panel";
import { Skeleton } from "./ui/skeleton";
import { ThemedText } from "./ui/themed-text";

interface QuestionProps {
  question?: QuestionResponse;
  onPress?: () => void;
  withMeta?: boolean;
  withCategory?: boolean;
}

const Question = ({ question, onPress, withCategory = false, withMeta = false }: QuestionProps) => {
  if (!question) return <Skeleton className="w-full h-20" />;

  return (
    <Pressable onPress={onPress}>
      <Panel>
        {withCategory && (
          <ThemedText type="meta" className="mb-1">
            {question.category.name}
          </ThemedText>
        )}
        <ThemedText style={styles.questionTitle}>{question.title}</ThemedText>
        <ThemedText>{question.description}</ThemedText>

        <Divider className="mt-2 mb-2" />

        <View className="justify-between flex-row">
          <ThemedText type="meta">
            <FontAwesome5 name="clipboard-list" /> {capitalizeFirst(question.type)}
          </ThemedText>
          <ThemedText type="meta">
            <FontAwesome5 name="dumbbell" className="me-1" />
            {question.difficulty}
          </ThemedText>
        </View>
      </Panel>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  questionTitle: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 10,
  },
});

export default Question;