import React from 'react';
import { View, ScrollView } from 'react-native';
import { useRouter } from 'expo-router';
import { AppContainer, MyText, tw, MyTouchableOpacity } from 'common-ui';
import { Ionicons } from '@expo/vector-icons';
import { TermsAndConditionsContent } from '@/components/TermsAndConditions';

export default function TermsAndConditions() {
  const router = useRouter();

  return (
    <AppContainer>
      <View style={tw`flex-1 bg-gray-50`}>
        {/* Header */}
        <View style={tw`flex-row items-center px-4 py-4 bg-white border-b border-gray-100`}>
          <MyTouchableOpacity
            onPress={() => router.back()}
            style={tw`p-2 -ml-2`}
          >
            <Ionicons name="arrow-back" size={24} color="#374151" />
          </MyTouchableOpacity>
          <MyText style={tw`text-xl font-bold text-gray-900 ml-2`}>
            Terms & Conditions
          </MyText>
        </View>

        {/* Content */}
        <ScrollView 
          style={tw`flex-1`}
          showsVerticalScrollIndicator={true}
          contentContainerStyle={tw`p-4 pb-8`}
        >
          <View style={tw`bg-white rounded-2xl p-5 shadow-sm`}>
            <TermsAndConditionsContent />
          </View>
        </ScrollView>
      </View>
    </AppContainer>
  );
}