import { Feather } from "@expo/vector-icons";
import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { colors, radii, spacing } from "../theme";

const icons = ["map-pin", "credit-card", "briefcase", "alert-circle"] as const;

type Question = { id?: string; text: string };

export function PopularQuestionsList({ questions, onSelect }: { questions: Question[]; onSelect: (text: string) => void }) {
  if (!questions.length) return null;

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Популярные вопросы</Text>
      <View style={styles.list}>
        {questions.map((question, index) => (
          <Pressable
            key={question.id ?? index}
            accessibilityRole="button"
            onPress={() => onSelect(question.text)}
            style={({ pressed }) => [styles.item, pressed && styles.pressed]}
          >
            <View style={styles.iconWrap}>
              <Feather name={icons[index % icons.length]} size={16} color={colors.primary} />
            </View>
            <Text style={styles.itemText}>{question.text}</Text>
          </Pressable>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { paddingHorizontal: spacing.lg, paddingVertical: spacing.md, borderTopWidth: 1, borderTopColor: colors.border, backgroundColor: colors.background },
  heading: { fontSize: 14, fontWeight: "500", color: colors.mutedForeground, marginBottom: 10, paddingHorizontal: 4 },
  list: { gap: spacing.sm },
  item: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
    backgroundColor: colors.card,
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: radii.lg,
    padding: 10,
  },
  iconWrap: {
    width: 28,
    height: 28,
    borderRadius: radii.full,
    backgroundColor: "rgba(3, 2, 19, 0.1)",
    alignItems: "center",
    justifyContent: "center",
  },
  itemText: { flex: 1, fontSize: 14, color: colors.foreground },
  pressed: { backgroundColor: colors.accent },
});