import React from 'react';
import { View, ScrollView, Text } from 'react-native';
import Tile from '../../../components/Tile';
import {
  condensedAccountTiles,
  accountCards,
  creditCards,
  serviceCards,
  serviceGrid,
  promotionalCards
} from '../../core/combined-auth/data/mockData';
import { summaryStyles } from './styles';
import { useTheme } from 'theme/ThemeProvider';
import { ThemedText } from '@components/ThemedText';

interface SummaryProps {
  screenWidth: number;
}

const Summary: React.FC<SummaryProps> = ({ screenWidth }) => {

  const { theme } = useTheme();
  const styles = summaryStyles(theme);

  return (
    <View style={[styles.sectionContainer, { width: screenWidth }]}>
      <ScrollView
        style={styles.sectionScrollView}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.sectionContent}
      >
        {/* Condensed Account Tiles (like Birthdays, Home Insurance) */}
        {/* {condensedAccountTiles.map((account, index) => (
          <View key={account.id}>
            <Tile type="account" data={account} style={index === 0 ? { marginTop: 0 } : undefined} />
          </View>
        ))} */}

        {/* Detailed Account Tiles */}
        {accountCards.map((account) => (
          <View key={account.id}>
            <Tile type="account" data={account} />
          </View>
        ))}

        {/* Credit Cards */}
        {/* {creditCards.map((card) => (
          <View key={card.id}>
            <Tile type="creditCard" data={card} />
          </View>
        ))} */}

        {/* Service Cards */}
        <View style={styles.servicesSection}>
          <ThemedText variant="subheading">Your spaces</ThemedText>
        </View>

        {serviceCards.map((service) => (
          <View key={service.id}>
            <Tile type="service" data={service} />
          </View>
        ))}

        {/* Service Grid */}
        <View key={serviceGrid.id}>
          <Tile type="serviceGrid" data={serviceGrid} />
        </View>

        {/* Promotional Cards */}
        {promotionalCards.map((promo) => (
          <View key={promo.id}>
            <Tile type="promotional" data={promo} />
          </View>
        ))}

        <View style={styles.bottomPadding} />
      </ScrollView>
    </View>
  );
};

export default Summary;