import { Collapsible } from '@/components/ui/collapsible';
import { Text } from '@/components/ui/text';
import React from 'react';

export function CollapsibleDemo() {
  return (
    <Collapsible title='What is React Native?'>
      <Text variant='body'>
        React Native is an open-source UI software framework created by Meta. It
        is used to develop applications for Android, iOS, macOS, tvOS, Web,
        Windows and UWP by enabling developers to use React's framework along
        with native platform capabilities.
      </Text>
    </Collapsible>
  );
}

import { Collapsible } from '@/components/ui/collapsible';
import { Text } from '@/components/ui/text';
import React from 'react';

export function CollapsibleDemo() {
  return (
    <Collapsible title='What is React Native?'>
      <Text variant='body'>
        React Native is an open-source UI software framework created by Meta. It
        is used to develop applications for Android, iOS, macOS, tvOS, Web,
        Windows and UWP by enabling developers to use React's framework along
        with native platform capabilities.
      </Text>
    </Collapsible>
  );
}

import { Collapsible } from '@/components/ui/collapsible';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function CollapsibleMultiple() {
  return (
    <View style={{ gap: 16 }}>
      <Collapsible title='Getting Started'>
        <Text variant='body'>
          To get started with React Native, you'll need to set up your
          development environment. This includes installing Node.js, React
          Native CLI, and either Android Studio or Xcode.
        </Text>
      </Collapsible>

      <Collapsible title='Components'>
        <Text variant='body'>
          React Native provides many built-in components like View, Text,
          ScrollView, TextInput, and more. You can also create custom components
          to build your app's interface.
        </Text>
      </Collapsible>

      <Collapsible title='Navigation'>
        <Text variant='body'>
          For navigation between screens, React Navigation is the most popular
          solution. It provides stack, tab, and drawer navigation patterns that
          work seamlessly with React Native.
        </Text>
      </Collapsible>
    </View>
  );
}

import { Collapsible } from '@/components/ui/collapsible';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function CollapsibleNested() {
  return (
    <Collapsible title='Mobile Development'>
      <Text variant='body' style={{ marginBottom: 16 }}>
        Mobile development encompasses various platforms and technologies:
      </Text>

      <View style={{ gap: 12 }}>
        <Collapsible title='iOS Development'>
          <Text variant='body'>
            iOS development primarily uses Swift or Objective-C with Xcode as
            the main development environment. Apps are distributed through the
            Apple App Store.
          </Text>
        </Collapsible>

        <Collapsible title='Android Development'>
          <Text variant='body'>
            Android development can be done with Java, Kotlin, or cross-platform
            frameworks. Android Studio is the official IDE, and apps are
            distributed through Google Play Store.
          </Text>
        </Collapsible>

        <Collapsible title='Cross-Platform'>
          <Text variant='body'>
            Cross-platform frameworks like React Native, Flutter, and Xamarin
            allow you to write code once and deploy to multiple platforms.
          </Text>
        </Collapsible>
      </View>
    </Collapsible>
  );
}

import { Checkbox } from '@/components/ui/checkbox';
import { Collapsible } from '@/components/ui/collapsible';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function CollapsibleWithContent() {
  const [preferences, setPreferences] = useState({
    darkMode: false,
    notifications: true,
    analytics: false,
  });

  return (
    <View style={{ gap: 16 }}>
      <Collapsible title='App Settings'>
        <View style={{ gap: 12 }}>
          <Checkbox
            checked={preferences.darkMode}
            onCheckedChange={(checked) =>
              setPreferences((prev) => ({ ...prev, darkMode: checked }))
            }
            label='Enable dark mode'
          />

          <Checkbox
            checked={preferences.notifications}
            onCheckedChange={(checked) =>
              setPreferences((prev) => ({ ...prev, notifications: checked }))
            }
            label='Push notifications'
          />

          <Checkbox
            checked={preferences.analytics}
            onCheckedChange={(checked) =>
              setPreferences((prev) => ({ ...prev, analytics: checked }))
            }
            label='Analytics tracking'
          />
        </View>
      </Collapsible>

      <Collapsible title='Account Information'>
        <View style={{ gap: 8 }}>
          <Text variant='body'>Email: user@example.com</Text>
          <Text variant='body'>Member since: January 2024</Text>
          <Text variant='body'>Subscription: Premium</Text>
        </View>
      </Collapsible>
    </View>
  );
}

import { Collapsible } from '@/components/ui/collapsible';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function CollapsibleFAQ() {
  const faqs = [
    {
      question: 'How do I reset my password?',
      answer:
        "You can reset your password by clicking on the 'Forgot Password' link on the login page. Enter your email address and we'll send you instructions to reset your password.",
    },
    {
      question: 'Can I cancel my subscription anytime?',
      answer:
        'Yes, you can cancel your subscription at any time from your account settings. Your subscription will remain active until the end of your current billing period.',
    },
    {
      question: 'Is my data secure?',
      answer:
        'We take data security seriously. All data is encrypted in transit and at rest. We follow industry best practices and comply with relevant data protection regulations.',
    },
    {
      question: 'How do I contact support?',
      answer:
        'You can reach our support team through the in-app chat, email us at support@example.com, or call our toll-free number during business hours.',
    },
  ];

  return (
    <View style={{ gap: 16 }}>
      <Text variant='subtitle' style={{ marginBottom: 8 }}>
        Frequently Asked Questions
      </Text>

      <View style={{ gap: 12 }}>
        {faqs.map((faq, index) => (
          <Collapsible key={index} title={faq.question}>
            <Text variant='body'>{faq.answer}</Text>
          </Collapsible>
        ))}
      </View>
    </View>
  );
}