info-target-mobile/screens/auth/register/RegisterScreen.tsx

import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import { Building2, ChevronRight, ShieldCheck, User } from 'lucide-react-native';
import React from 'react';
import {
  Animated,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { PersonType, useRegister } from './lib/useRegisterStore';

const PERSON_TYPES: {
  key: PersonType;
  label: string;
  description: string;
  icon: React.ReactNode;
  gradient: [string, string];
}[] = [
    {
      key: 'yatt',
      label: 'YATT',
      description: "Yakka tartibdagi tadbirkor",
      icon: <User size={28} color="#fff" />,
      gradient: ['#10b981', '#059669'],
    },
    {
      key: 'band',
      label: "O'zini o'zi band qilgan",
      description: "O'z faoliyatini mustaqil yurituvchi",
      icon: <ShieldCheck size={28} color="#fff" />,
      gradient: ['#3b82f6', '#2563eb'],
    },
    {
      key: 'legal_entity',
      label: 'Yuridik shaxs',
      description: "Tashkilot yoki korxona",
      icon: <Building2 size={28} color="#fff" />,
      gradient: ['#f59e0b', '#d97706'],
    },
  ];

function TypeCard({
  item,
  index,
  onPress,
}: {
  item: (typeof PERSON_TYPES)[number];
  index: number;
  onPress: () => void;
}) {
  const scale = React.useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.96,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Animated.View style={{ transform: [{ scale }] }}>
      <TouchableOpacity
        style={styles.card}
        onPress={onPress}
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
        activeOpacity={1}
        testID={`person-type-${item.key}`}
      >
        <LinearGradient
          colors={item.gradient}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.cardIcon}
        >
          {item.icon}
        </LinearGradient>
        <View style={styles.cardContent}>
          <Text style={styles.cardTitle}>{item.label}</Text>
          <Text style={styles.cardDescription}>{item.description}</Text>
        </View>
        <ChevronRight size={20} color="#94a3b8" />
      </TouchableOpacity>
    </Animated.View>
  );
}

export default function PersonTypeScreen() {
  const router = useRouter();
  const { setPersonType } = useRegister();

  const handleSelect = (type: PersonType) => {
    setPersonType(type);
    router.push('/(auth)/register-form');
  };

  return (
    <View style={styles.container}>
      <LinearGradient
        colors={['#0f172a', '#1e293b', '#334155']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={StyleSheet.absoluteFill}
      />
      <View style={styles.decorCircle1} />
      <View style={styles.decorCircle2} />

      <SafeAreaView style={styles.safeArea}>
        <View style={styles.header}>
          <Text style={styles.title}>Ro'yxatdan o'tish</Text>
          <Text style={styles.subtitle}>
            Faoliyat turingizni tanlang
          </Text>
        </View>

        <View style={styles.cardList}>
          {PERSON_TYPES.map((item, index) => (
            <TypeCard
              key={item.key}
              item={item}
              index={index}
              onPress={() => handleSelect(item.key)}
            />
          ))}
        </View>

        <View style={styles.footer}>
          <TouchableOpacity onPress={() => router.back()} testID="go-to-login">
            <Text style={styles.footerText}>
              Hisobingiz bormi? <Text style={styles.footerLink}>Kirish</Text>
            </Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  safeArea: {
    flex: 1,
    paddingHorizontal: 24,
  },
  header: {
    alignItems: 'center',
    marginTop: 40,
    marginBottom: 36,
  },
  title: {
    fontSize: 28,
    fontWeight: '800' as const,
    color: '#ffffff',
    marginBottom: 10,
    letterSpacing: 0.5,
  },
  subtitle: {
    fontSize: 15,
    color: '#94a3b8',
    textAlign: 'center',
    lineHeight: 22,
  },
  cardList: {
    gap: 14,
  },
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.06)',
    borderRadius: 20,
    padding: 18,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.1)',
    gap: 16,
  },
  cardIcon: {
    width: 56,
    height: 56,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardContent: {
    flex: 1,
  },
  cardTitle: {
    fontSize: 17,
    fontWeight: '700' as const,
    color: '#ffffff',
    marginBottom: 4,
  },
  cardDescription: {
    fontSize: 13,
    color: '#94a3b8',
    lineHeight: 18,
  },
  footer: {
    marginTop: 'auto' as const,
    paddingBottom: 20,
    alignItems: 'center',
  },
  footerText: {
    color: '#94a3b8',
    fontSize: 14,
  },
  footerLink: {
    color: '#3b82f6',
    fontWeight: '700' as const,
  },
  decorCircle1: {
    position: 'absolute',
    top: -150,
    right: -100,
    width: 400,
    height: 400,
    borderRadius: 200,
    backgroundColor: 'rgba(59, 130, 246, 0.1)',
  },
  decorCircle2: {
    position: 'absolute',
    bottom: -100,
    left: -150,
    width: 350,
    height: 350,
    borderRadius: 175,
    backgroundColor: 'rgba(16, 185, 129, 0.08)',
  },
});