import { View, StyleSheet } from 'react-native';
import { ScreenLayout } from '../../components/ui/ScreenLayout';
import { RecordCard } from '../../components/ui/RecordCard';
import { AppButton } from '../../components/ui/AppButton';
import { useSubscriptionRestriction } from '../../hooks/useSubscriptionRestriction';
import { navigateApp } from '../../navigation/appNavigation';
import { spacing } from '../../constants/theme';

export function AccountLockedScreen() {
  const { message } = useSubscriptionRestriction();

  return (
    <ScreenLayout
      title="Access unavailable"
      subtitle="Account subscription"
      hideSubscriptionBanner
    >
      <RecordCard
        title="Trial or subscription expired"
        subtitle={message}
        badge="locked"
      />
      <View style={styles.links}>
        <AppButton label="Browse guides" icon="documentation" onPress={() => navigateApp('GuidePublic')} />
        <AppButton label="FAQ" icon="faq" variant="outline" onPress={() => navigateApp('FaqPublic')} />
        <AppButton label="Blog" icon="blog" variant="outline" onPress={() => navigateApp('BlogPublic')} />
        <AppButton label="Help / Support" icon="help" variant="outline" onPress={() => navigateApp('HelpSupport')} />
      </View>
    </ScreenLayout>
  );
}

const styles = StyleSheet.create({
  links: { marginTop: spacing.lg, gap: spacing.sm },
});