import { View, Text } from '@tarojs/components';
import { getLegalDocument } from '@dukang/shared-types';
import PageShell from '../../components/PageShell';
import SubPageHeader from '../../components/SubPageHeader';

export default function UserAgreementPage() {
  const doc = getLegalDocument('user-agreement');
  return (
    <PageShell variant="sub" className="legal-page">
      <SubPageHeader title={doc.title} />
      <View className="sub-page-body inset-page legal-body">
        <Text className="legal-updated" selectable>
          更新日期：{doc.updatedAt}
        </Text>
        <Text className="legal-intro" selectable>
          {doc.intro}
        </Text>
        {doc.sections.map((section) => (
          <View key={section.heading} className="legal-section">
            <Text className="legal-heading" selectable>
              {section.heading}
            </Text>
            {section.paragraphs.map((p, i) => (
              <Text key={`${section.heading}-${i}`} className="legal-paragraph" selectable>
                {p}
              </Text>
            ))}
          </View>
        ))}
      </View>
    </PageShell>
  );
}
