import { View, Text, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { getLegalDocument } from '@dukang/shared-types';
import './legal.css';

export default function UserAgreementPage() {
  const doc = getLegalDocument('user-agreement');
  return (
    <View className="hq-legal-page">
      <View className="hq-legal-header">
        <Text className="hq-legal-back" onClick={() => Taro.navigateBack()}>
          ‹
        </Text>
        <Text className="hq-legal-title">{doc.title}</Text>
      </View>
      <ScrollView scrollY className="hq-legal-body">
        <Text className="hq-legal-updated">更新日期：{doc.updatedAt}</Text>
        <Text className="hq-legal-intro">{doc.intro}</Text>
        {doc.sections.map((section) => (
          <View key={section.heading} className="hq-legal-section">
            <Text className="hq-legal-heading">{section.heading}</Text>
            {section.paragraphs.map((p, i) => (
              <Text key={`${section.heading}-${i}`} className="hq-legal-paragraph">
                {p}
              </Text>
            ))}
          </View>
        ))}
      </ScrollView>
    </View>
  );
}