import { StyleSheet, Text, View } from 'react-native';
import { colors , spacing } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { SearchInput } from '../ui/SearchInput';
import { PrimaryButton } from '../ui/PrimaryButton';

export function P12Company() {
  const { data, setData, navigate, back } = useOnboarding();
  const canNext = data.company.trim().length > 0;

  return (
    <ScreenShell title="就职公司" showBack onBack={back}>
      <SearchInput
        value={data.company}
        onChangeText={(t) => setData({ company: t })}
        placeholder="请输入公司名称"
        onClear={() => setData({ company: '' })}
      />

      <View style={styles.notice}>
        <Text style={styles.noticeText}>
          将自动屏蔽该公司，该公司 Boss 无法看见你的信息
        </Text>
      </View>

      <View style={styles.footer}>
        <PrimaryButton label="下一步" active={canNext} onPress={() => navigate('P13')} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  notice: {
    marginTop: 8,
    padding: spacing.card,
    borderRadius: spacing.card,
    backgroundColor: colors.primaryLight,
  },
  noticeText: { fontSize: 12, color: colors.primaryText, lineHeight: 18 },
  footer: { marginTop: 28 },
});