import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Text, TouchableOpacity, View } from "react-native";

import { SERVICES } from "@/constants/services";
import { useT } from "@/lib/i18n";
import { useServiceStore } from "@/store";

/**
 * Service picker: Car / Moto / Courier / My Car.
 *
 * Four equal tiles across the row rather than a scroller — with only four
 * services, anything off-screen is a service riders won't discover. Selection
 * styling matches the role picker on sign-up so the two read as the same
 * control.
 */
export const ServiceSelector = () => {
  const { service, setService } = useServiceStore();
  const t = useT();

  const selected = SERVICES.find((item) => item.id === service);

  return (
    <View>
      <View className="flex-row gap-2">
        {SERVICES.map((item) => {
          const active = item.id === service;

          return (
            <TouchableOpacity
              key={item.id}
              onPress={() => setService(item.id)}
              activeOpacity={0.8}
              accessibilityRole="button"
              accessibilityState={{ selected: active }}
              className={`flex-1 items-center rounded-2xl border py-3 ${
                active
                  ? "border-primary-500 bg-primary-500/10"
                  : "border-neutral-100 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800"
              }`}
            >
              <MaterialCommunityIcons
                name={item.icon}
                size={24}
                color={active ? "#0286ff" : "#858585"}
              />

              <Text
                numberOfLines={1}
                className={`mt-1.5 text-xs font-JakartaBold ${
                  active ? "text-primary-500" : "text-black dark:text-white"
                }`}
              >
                {t(item.labelKey)}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>

      {selected ? (
        <Text className="mt-3 text-sm font-Jakarta text-general-200 dark:text-neutral-400">
          {t(selected.taglineKey)}
        </Text>
      ) : null}
    </View>
  );
};